Social icons broken after update

[savantmg]

Hello,
Recently updated a site and the social icons broke.
I found quite a few threads on here about this, and I added the extra code to fix them (e.g. data-x-icon-b="") - which worked for Facebook and Twitter.
However, we were also using an envelope for email, and this one is still broken.
I used the unicode from Fontawesome but it still is not working:
data-x-icon-b=""
We would ideally like to use this one: https://fontawesome.com/icons/envelope-square?style=solid
I also tried the f199 with no luck:
<i class="x-icon-envelope" data-x-icon-b="&#xf199;"></i>

[nabeel]

Hi @savantmg

Thank you for reaching out to us! This could happen if your site has icon markup that you added directly rather than using our icon shortcode. 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.

The original attribute data-x-icon will still work for solid icons as a fallback but we’ve updated everything for consistency.

Also checkout FAQ section of https://theme.co/apex/forum/t/release-notes-pro-2-2-x-6-2-cornerstone-3-2/38234

For the envelop icon you need to use the following HTML markup:

<i class="x-icon-envelope" data-x-icon-s=""></i>

For more details you can also checkout https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

Let us know how this goes!

[savantmg]

Changing it to icon-s did the trick - thanks!

[nabeel]

We’re glad it worked.

Cheers!