Data.X.Icon

[Dx3Creations]

Apologies if I’m starting a new thread for no reason but I can’t figure out how to reply to the last one, I think it might be closed? My social icons are not showing up and you gave instruction on how to fix it.

However, it’s been 2+ years since I’ve edited it and I can’t remember WHERE I go to change it… or how…
I’ve looked in Options and can’t find it… Help!

This is for the social icons in the top right corner of every page:

Play a 1,000 sq ft Escape Room Orange County, CA at Red Lantern

You said:

friech
Staff
16d
Hi @Dx3Creations,

As of Font Awesome version 5 they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:

data-x-icon-b for social icons.
data-x-icon-o for outline icons.
data-x-icon-s for solid icons.

For example, the facebook icon

Since facebook is brand you need to update that to:

Release Notes - Pro 2.2, X 6.2, Cornerstone 3.2

Hope it helps,
Cheers!

[Dx3Creations]

Ahh! I found the CSS file. But since I found it, I’m still not sure what to change everything to.
So where it says:
.x-icon-facebook-square:before

Do I change that to:

.data-x-icon-b-facebook-square:before

?? When I tested that, it didn’t seem to work.
Thanks so much for the help…

/* for social icon */
.x-topbar .x-social-global a {
font-size:35px!important;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}
.x-icon-facebook-square:before {
content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-fb-sm.png);
}
.x-icon-twitter-square:before {
content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-tw-sm.png);
}
.x-icon-instagram:before {
content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-insta-sm.png);
}
.x-icon-youtube-square:before {
content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-tb-sm.png);
}
.x-icon-google-plus-square:before {
content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-ta-sm.png);
}

.x-icon-linkedin-square:before {
content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-yelp-sm.png);
}

[ruenel]

Hello @Dx3Creations,

Thanks for writing in!

To resolve your issue, please have your css updated and use this code instead:

.x-social-global .x-icon-facebook-square:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-fb-sm.png);
}

.x-social-global .x-icon-twitter-square:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-tw-sm.png);
}

.x-social-global .x-icon-instagram:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-insta-sm.png);
}

.x-social-global .x-icon-youtube-square:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-tb-sm.png);
}

.x-social-global .x-icon-google-plus-square:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-ta-sm.png);
}

.x-social-global .x-icon-linkedin-square:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2017/01/rl-yelp-sm.png);
}

We would loved to know if this has work for you. Thank you.

[Dx3Creations]

I had to copy and paste one at a time but YASSS they worked.
Whew, thanks!

[mldarshana]

Glad it works for you