Simplex Design blog : Adding social icons to your website using fontawesome

---

Adding social icons to your website using fontawesome Posted: 24 Oct 2013 08:41 PM PDT Marketing in social network is essential to all websites and blogs. Most of website I visitted have icons link to social networks. Adding these social button to your site is a small works but take time. In this post, I would like to show you how to adding social icons to your site with less time by using FontAwesome. FontAwesome is a set of 370 icons for website which designed for Bootstrap framework. But you don't need Bootstrap to use FontAwesome. This can be used in any site. Installation There are two ways to install FontAwesome: Download script/icons to your computer then hosting by your own. Using Fontawesome which hosted in BootstrapCDN I will show you the second way because it easier and suitable for Blogger user who don't have much money to spend. To use Fontawesome this way, all you need is to add this line right before </head> in your Blogger template. <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"> Ok, you are done. How to use 1. Check the list of icons that FontAwesome provide here: http://fontawesome.io/icons/ 2. Click on icon you want, you will see the code like bellow: For example. I choose Twitter icon: <i class="fa fa-twitter"></i> fa-twitter 3. Paste the code given to the position you want icon shown. I pasted this icon here How to customize this icon  It's very easy to custom FontAwesome icons. You only need some CSS lines to make it display as you want. Fontawesome icons are considered fonts, so you can apply CSS attribute which using for font to FontAwesome icon, such as font-size, font-style... For example, here is CSS I used to customize Twitter icon above: i.fa-twitter { font-size: 40px; font-color:#000; } That's all. So you don't need to worry about designing icons or copyright of icons, or hosting icons your own. Easy right ?

You are subscribed to email updates from SimplexDesign - free blogger template To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610