You are very familiar with these like icons in websites, Isn't it ? That are not a small image PNG files uploaded on the website...
You are very familiar with these like icons in websites, Isn't it ? That are not a small image PNG files uploaded on the website? These are Font awesome icons, Font awesome provides scalable vector icons that look good at any size or dimension. Being a web designer or a blogger you might need a lot of different icons set to give your site a professional touch. So in this article we can check how add Font Awesome icons in a website or a blogger blog and apply various styles to Font Awesome icons using CSS
What are Font Awesome icons
Font awesome icons are vector icons means that we can scalable in any resolution without losing clarity.
Qualities of Font Awesome Icons
- Everything is Free!
- Easy to customize
- Fast for loading
- Wide range collection of icons
- Supporting with CSS
- No JavaScript Required
- Infinite Scalability
- Animated Icons
How to Install
Go to your HTML file (in blogger go to dashboard and select Template option and click on Edit as HTML)
Find the <head> tag and just paste the following code below the tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Now stylesheet is installed
How to add Icons
You can find lot of icons from here fortawesome.github.io/Font-Awesome/icons/ and copy their corresponding codes, paste on your HTML where you want see them.
Example :
Example :
<i class="fa fa-area-chart"></i>Result :
Applying CSS to Icons
We can apply various styles like Color, Shadow, Size and many others.
CSS inside <i> tag
Code:
<i class="fa fa-file-image-o" style="font-size:18px; color:#709F32"></i>Result :
CSS Separately
Code:
fa-check-circle-o {In blogger you can add this CSS just before the ]]></b:skin>
font-size:20px;
font-weight:bold;
color:#111;
border:1px solid #111;
padding:10px;
float:left;
}
It's time for make your website or blog awesome. Thank you,
Follow us on Facebook: facebook.com/CybUp
