Ever wanted to have social media icons automatically appear next to any link that went to Facebook, Twitter, etc? We decided to add this to our website portfolio to display the link to the new website, as well as our client’s social media links. However, having several links stacked together was confusing without the icons. You can see this in use here or by clicking on any item in the portfolio.
1. The first step is making sure your Joomla website references the FontAwesome library. Many Joomla templates already have this built-in, so you can try jumping to the other steps, and if it doesn’t appear on the front-end, go back and add the call to your template file. To get full instructions on how to do this, go to http://fontawesome.io/get-started/.
The easiest way is to paste the following code into the <head>section of your site’s HTML.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
2. The second step is to add the custom CSS code to your Joomla template. For our portfolio, we only setup rules for our ZOO component, but for the sake of simplicity, I made the CSS generic for this tutorial.
a[href*="twitter"]:before {font-family: FontAwesome;padding-right:10px;content:"\f099";}
a[href*="facebook"]:before {font-family: FontAwesome;padding-right:10px;content:"\f09a";}
a[href*="linkedin"]:before {font-family: FontAwesome;padding-right:10px;content:"\f0e1";} a[href*="plus.google"]:before {font-family: FontAwesome;padding-right:10px;content:"\f0d5";}
Those rules translated into use, look like:
http://www.facebook.com/yellowwebmonkey
http://www.twitter.com/yellowwebmonkey
http://www.linkedin.com/company/yellowwebmonkey-web-design
https://plus.google.com/b/108708692567001979795/
or
3. You can add any additional CSS formatting like adjusting the size of the icon (font-size), color, spacing, etc. Because you are using the :before psudeo-class, the formatting only affects the icon and not the text link itself.
4. To lookup other icons that are available, I recommend using the FontAwesome Cheatsheet.
5. To adjust the CSS selectors of what type of links to apply the icons to, I highly suggest the NetTuts Tutorial, The 30 CSS Selectors you Must Memorize.
