Font Awesome Social Icons not showing after 3.0.2/3.0.4 upgrade

Backlight Customization
#1

Using PHP Plugin to customize my footer. After upgrade, the FA icons no longer work. I’m confused as it looks to me to be correct.

Since I can’t add the imaged it looks to me like my fa-instagram icon comes out with the letters “FI6D”, Facebook comes out with letters “F09A” and LinkedIn comes out with letters “F0BC” - which are the escaped values for those icons.

Here’s my PHP Plugin code:
/Footer replacement

function footer_top() {

echo '
	<div class="grid_12" id= "footer">

		<div class= "col_8">
		<p>Copyright &copy; ' . date("Y") . ' Michael C Boatright, All Rights Reserved.
		</div>

		<div class="social-media-profiles social-media col_4">
		<ul>
		<li><a target="_blank" href="https://www.instagram.com/michaelboatrightphotography/" class="social_media fa fa-instagram"></a></li>
		<li><a target="_blank" href="https://www.facebook.com/michaelboatrightphotography" class="social_media fa fa-facebook"></a></li>
		<li><a target="_blank" href="https://www.linkedin.com/in/michaelboatrightphotography/" class="social_media fa fa-linkedin"></a></li>
		</ul>

		</div> <!-- #social-media-profiles -->

	</div>
';

return false;
}

#2

Backlight 3 uses Font Awesome 5. The code you have is using syntax from Font Awesome 4.7.
The easiest thing to do is to edit your page template and go to Advanced Setup > Iconography > Font Awesome Version Support and enable the Font Awesome 4 shim.
You may need to clear template cache after making the change.

#3

Ta Da! Thank you. Is the Font 5 syntax that different? I note that the info tab on the Version Support says it slows the page load down. Is it worth redoing the syntax, or wait for 6?

#4

The syntax is different. I don’t know it off the top of my head, so take a look at the Font Awesome site.
If the footer is the only place you’re using the Font Awesome 4 icons, it might be worth using the new syntax; it’s only a matter of making three changes in your phplugins code.

I have no knowledge of when Font Awesome 6 is coming out or if Matt and Ben will update Backlight to use it.

#5

For Font Awesome 5, some of the classes changed. Use fab instead of fa:

<li><a target="_blank" href="https://facebook.com/DanielLeuPhotography" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li><a target="_blank" href="https://instagram.com/danielleuphoto" titel="Instagram"><i class="fab fa-instagram"></i></a></li>
#6

My understanding of Font Awesome 6 is that it will be a drop-in replacement for Font Awesome 5, so I’m hoping for a seamless upgrade. I’m a Font Awesome backer, so already setup to have it the moment it becomes available. Haven’t found time to mess with the pieces they’ve released in beta yet, though.

#7

Thanks, Rod!

#8

Matthew – personally, I’m not too hung up on which release…just making sure I keep up with things as they change. I’ll pay closer attention to upgrade notes!

Love Backlight and 3 is so much easier to use!

#9

This worked! So I turned off FA 4 shims. Thanks!

1 Like