Sony Simon Live. Love. Learn.
If you are all excited about adding icons to your website after reading my last article on the topic, then this article is a must-read. Here I will share with you 4 ways to get some fancy icons for your website.
#1 Font Awesome
Font awesome is one of my favourite free icon packs. There are over 600 icons to choose from. You can change the icon size, colour and shadow using CSS. This icon pack was originally designed for Bootstrap and is compatible across multiple frameworks. Using Font Awesome icon pack is very easy.
The easiest way to use Font Awesome icons in your website is using Font Awesome CDN. You can enter your email address here and you will be provided with a link via email (e.g. https://use.fontawesome.com/xxxxxxxxxx.js)
You can insert this as follows in the <head> tag of the website.
<script src="https://use.fontawesome.com/xxxxxxxxxx.js></script>
Alternatively, you can download the Font Awesome icon pack and then include the CSS file in your website using the below HTML tag.
<link rel="stylesheet" href="font-awesome-path/css/font-awesome.min.css">
To use the icon you can use the HTML code as follows:
<i class="fa fa-iconcode"></i>
#2 Icomoon
IcoMoon has a free version with 450 icons which includes common pictograms for user interfaces as well as social media and browser symbols. You can also create multicolour icons by using CSS :after and :before selectors.
#3 Fontello
Fontello is a tool to quickly pack vector images into web fonts. As mentioned by the author, this is indeed like Bootstrap for images. It has a big built-in collection of open source artworks of over 2300 icons which include Font Awesome, Fontelico, Entypo, Typicons, Iconic, Modern Pictograms, Meteocons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons and Web Symbols. You can also upload your icon files to generate web fonts.
Fontello generates archive with fonts, CSS files and docs. And you can include the CSS file in your website using the <link> tag and display icons using <i> tag same as in the case of Font Awesome icons.
#4 Fontastic
Similar to Fontello, Fontastic also packages vector images into web fonts. With Fontastic, you can download over 3500 icons.
What sets Fontastic apart from Fontello is the possibility of placing icons via data-attributes. Data-attributes see wide-spread use in HTML5-based designs nowadays. In this case, they are an alternative to controlling the pictograms using CSS classes. Just define a shortcut and call the icons like this:
<div class="icon" data-icon="a">text beside icon</div>
