v5Tutorial Complete Blogger Tutorials


Font Awesome - Icon Set

Use icon to design Blogger blog by Font Awesome.
  • Font Awesome gives you scalable 634+ vector icons.
  • Can be customized with CSS (size, color, shadow, etc.)
  • Build-in CSS library for Animation & more.
  • Add icons anywhere in Blogger posts, widgets & template.
Note: No downloading or installation is required!

Add Font Awesome in Blogger

Go to Template > Edit HTML & past the code after  <head> tag.

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' rel='stylesheet'/>

Use Font Awesome in Blogger

Use class fa and fa-NAME in <i> or <span> elements to add icons. List of available icons here.

<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-thumbs-o-up"></i>

Styling CSS

Use CSS to style Font Awesome icon.

<i class="fa fa-facebook-square" style="font-size: 48px; color: #3b5998"></i>
<i class="fa fa-twitter-square" style="font-size: 48px; color: #55acee"></i>
<i class="fa fa-google-plus-square" style="font-size: 48px; color: #dd4b39"></i>

Styling Classes

Add Font Awesome Styling classes to style the icon.

<i class="fa fa-car fa-4x fa-border fa-spin"></i>

Size Classes


fa-lg

fa-2x

fa-3x

fa-4x

Rotated & Flipped Classes


fa-spin

fa-pulse

fa-rotate-90

fa-rotate-180

fa-rotate-270

fa-flip-horizontal

fa-flip-vertical

fa-border

Related Post

Java Scripts