FontAwesome facebook-icon not showing after X update

[pbeenz]

My FontAwesome facebook icon is not showing after X update. Ive gone from X v01 to v10 so it a big jump. As you can see below on the right hand side the facebook icon is visible, this is version 1

After the update

the icon is just an X in a box, this is version 10. This menu item is controlled by the facebook-icon class and is associated to the menu item like this:

The Global CSS file references this class thus:

  .x-navbar .desktop .x-nav li>a>span:after {
    content: "\f107";
    font-size: 0.9em;
}
  .facebook-icon a:before { 
    content: "\f09a";
    display: inline-block;
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-rendering: auto;
    font-size: 22px;
    text-align: center;
    padding-right: 10px;
}

  .desktop .menu-item.facebook-icon {
    position: absolute;
    right: 30px;
    top: 0;
  }
  .x-navbar .desktop .x-nav > li.facebook-icon > a {
    color: #009cbe;
  }
  .x-navbar .desktop .x-nav > li.facebook-icon > a:hover {
    color: #7ac05f;
  }
  .x-navbar .desktop .x-nav > li.facebook-icon > a:hover:before {
    border-color: #7ac05f;
  }
  .facebook-icon a:before {
    border: 1px solid #009cbe;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    padding: 8px;
    text-align: center;
  }
  .desktop .menu-item.facebook-icon span{
    display: none;
  }

Notably the menu dropdown icon, content:"\f107" above works correctly (this got changed in the update) so it looks like its finding the FontAwesome icons. There are no instances of “data-x-icon” in the website.

I’m not quite sure how to proceed now because I cant fine a solution online that references the facebook-icon class specifically.

Any ideas

Cheers
Paul

[ruenel]

Hello Paul,

Thanks for the very detailed post information. Please make sure that you have inserted the CSS code with the correct quotes.

This is INCORRECT:

The CORRECT one should be this:

Best Regards.

[pbeenz]

Hi @ruenel, I’m not quite sure what you mean. The quotation marks in the CSS file are 2 verticals not 66 & 99.

As an update: It appears that if I use any content code other than a Social Media one then the icon displays.
Here I’ve swapped out “\f09a” for “\f1b2”

.facebook-icon a:before { 
    content: "\f1b2";
    display: inline-block;
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-rendering: auto;
    font-size: 22px;
    text-align: center;
    padding-right: 10px;
}

and a cube is displayed as expected, so it appears to be something to do with Social Media (the Twitter icon fails as well).

cheers Paul

[ruenel]

Hello Paul,

Please go to Cornerstone > Theme Options > Miscellaneous > Font Awesome and make sure that the “Brands” are enabled.

If this does not help, please provide us with your WP Access. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Kindly let us know how it goes.

[pbeenz]

Hi ruenel, Ive sent a secure message

cheers
Paul

[ruenel]

Hello Paul,

Be aware that font awesome has changed. You will have to update your CSS code from font-family: "FontAwesome"; into font-family: "FontAwesomeBrands"; instead.

Best Regards.

[pbeenz]

Hi Ruenel,

yes that did the trick , thanks for your help.

cheers
Paul

[ruenel]

You are most welcome, Paul.