Archive Pages Design$type=blogging

How to Install Font Awesome icons in your Website or Blogger

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...


How to Install Font Awesome icons in your Website or Blogger

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 :
<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 {
font-size:20px;
font-weight:bold;
color:#111;
border:1px solid #111;
padding:10px;
float:left;
}
 In blogger you can add this CSS just before the ]]></b:skin> 

It's time for make your website or blog  awesome. Thank you,

Follow us on Facebook: facebook.com/CybUp

COMMENTS

Name

AI Android Blogger CSS Facebook Featured Freebie Google HTML Internet Javascript Open Source Post SEO WebDesign Widget Wordpress
false
ltr
item
Cybup: How to Install Font Awesome icons in your Website or Blogger
How to Install Font Awesome icons in your Website or Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVNCGKztI_6_ifIymlhDP9yGvOO-nUTA7U_NyMLeBxEFGD4Hj1cG4ZKyzrj-Z2eoshvknZmbd7-Egm_BoxAhRpEfPurpjiBDUDXpoHeEIqDszG6ZaWFkrcdjF-R7yZ-GBDbW_NIk6bxY5/s640/How-to-Install-FontAwesome-icons-in-your-Website-or-blogger-blog.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVNCGKztI_6_ifIymlhDP9yGvOO-nUTA7U_NyMLeBxEFGD4Hj1cG4ZKyzrj-Z2eoshvknZmbd7-Egm_BoxAhRpEfPurpjiBDUDXpoHeEIqDszG6ZaWFkrcdjF-R7yZ-GBDbW_NIk6bxY5/s72-c/How-to-Install-FontAwesome-icons-in-your-Website-or-blogger-blog.jpg
Cybup
http://cybup.blogspot.com/2015/09/How-to-Install-FontAwesome-icons-in-your-Website-or-blogger-blog.html
http://cybup.blogspot.com/
http://cybup.blogspot.com/
http://cybup.blogspot.com/2015/09/How-to-Install-FontAwesome-icons-in-your-Website-or-blogger-blog.html
true
1938789928030985205
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago