Docs

[Jacob D]

So I’ve followed a few different topics here on the forums to try and replace one of the standard social icon slots with an alternate that is needed. Since I’m not planning on using the RSS icon, I was using that slot as my placeholder and I’ve tried placing the following code to try and get Yelp to be an option.

I placed this in the customizer with no change, so then placed it in the style.css of my child theme. In my CSS editor it shows it working just fine, but in a web browser it remains as RSS, despite clearing my cache, trying different browsers, etc.
.x-icon-rss-square:before{content:"\f1e9"}

I added this snipet to the customizer’s script area which worked as expected, so now on hover, Yelp shows up:

(function($){ 
	$('.rss').attr('title','Yelp');
})(jQuery)

The site I’, (STILL) working on is at http://cerulean.pmcgdev.com/ so, any suggestions as to why this isn’t working or any suggestions?

[Christopher]

Hi there,

Please close bracket for media query rule at the right place.
The correct format :

@media (max-width:979px){
/* Style goes here */
    }

What you already have :

@media (max-width:979px){
    a.x-brand.img {
        background-image: url("http://cerulean.pmcgdev.com/wp-content/uploads/Cerulean-Mobile-Logo.png") !important;
        width: 67%;
        display: inline-block;
        background-size: contain;
        height: 50px;
        background-repeat: no-repeat;
    }
    .x-brand img {
        display: none;
    }

.x-navbar .desktop .x-nav li>a>span:after {
    content: "";
}

.x-column.x-1-4 {
    width: 24.6%;
    margin-right: .5%;
}

.x-icon-rss-square:before{content:"\f1e9"}

Thanks.

[Jacob D]

Thank you for the reply – I removed the that extra bracket for the media query rule, but nothing changed. It now looks like:

@media (max-width:979px) {
a.x-brand.img 
background-image: url("http://cerulean.pmcgdev.com/wp-content/uploads/Cerulean-Mobile-Logo.png") !important;
width: 67%;
display: inline-block;
background-size: contain;
height: 50px;
background-repeat: no-repeat;
    }

Was this supposed to help rectify the social icon or …?

[Rupok]

Hi there,

Your code seems right but I can’t see this on your site. Did you remove this? Would you mind providing your login credentials?

Thanks!

[Jacob D]

Since I wasn’t seeing any changes, I moved it to the child theme’s style.css and removed it from the customizer: http://cerulean.pmcgdev.com/wp-content/themes/x-child/style.css I can of course put it back, but I was having better luck with other changes in the child theme’s style.

I’ll provide a login in a private post.

[Jacob D]

This reply has been marked as private.

[Jade]

Hi Jacob,

Thanks for the details.

There are some CSS syntax errors in your style.css file and I went ahead and fixed them.

You should be able to see the Yelp icon now.

Cheers!

[Jacob D]

Thank you so much, I really do appreciate it!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts