Auto Adding Social Media Icons to Links Using CSS and Font Awesome
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.
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.
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.
Alexis moved to Waco in 2008 after five years in the United States Army as a military police officer. Web design was a hobby that grew into a passionwhile she was in the military. She is the founder of ArmyToolbag.com, a reference website for Army personnel that averages over 25,000 unique visitors a month. When she sold that website to a national marketing firm, she decided to venture out and start YellowWebMonkey Web Design in 2009. She has a Bachelor of Science degree in Psychology and Computer Science Engineering from the United States Military Academy at West Point, NY.