Add Font Awesome Icon to Social Media Header

[Kimley]

Not exactly sure how you have your header set up but in the Theme Options -> Header Options, for Top Bar right text config I have the following:

[social size=’small’ style=’light’ type=’twitter,facebook,phone’]

“phone” should be whatever ID you’ve given the icon you wish to use i.e. “envelope” and change all my references to “phone” in the short code to the Font Awesome icon you wish to use.

You can see how this looks on my site – I’ve added the phone icon to the right of the Facebook & Twitter icons:

Home

Hope this helps…

Kimley

[tracytracy]

If I JUST add the code into the shortcodes php then I get the new icon repeated after each social icon.

If I add the code in the shortcode.php AND I include “envelope” in the Header option/top bar right like this:

[social size=’small’ style=’light’ type=’twitter,facebook,youtube,flickr,envelope’]

then I get an EXTRA envelope added to the end of the icon string – see attached screen shot.

😉 The trick is – how do I just get it ONE time and as a link? ah HA! (or I should say, the trick is why isn’t this working.)

Obviously I’m missing a step somewhere.

[Kimley]

I took a look at the short code you posted and it looks like you’re missing the if ($id == “envelope”) line of the code.

This is what I used:

					if ($id == "phone") {
						$social_icons .= '<li class="phone"><a href="http://www.visionfirst.com/contact-us/"><i class="fa-phone"></i><i class="fa-phone"></i></a></li>'."\n";
					}

Hope that fixes it.

[tracytracy]

TAADAAAA! that did it, THANK YOU.

The original code posted was missing the

if ($id == "phone") {

and the additional } to close it out.

So – for everyone out there trying to add other icons to your top nav bar –
1) add the code to shortcodes.php page (get all the code!)
2) add the icon name in the Theme Options/Header Options
and voila!

					if ($id == "envelope") {
						 $social_icons .= '<li class="envelope"><a href="http://www.yourdomainhere.com/contact-us/"><i class="fa-envelope"></i><i class="fa-envelope"></i></a></li>'."\n";
                    
				}	

[Kimley]

Yay! So glad you were able to get it worked out!

[Mohammad – SUPPORT]

hI,
I am glad 🙂 that You sorted the issue .
Thanks
With Best Regards
Swift Ideas