Adding Font Awesome icons to Blogger?
Follow these steps to add Font Awesome icons anywhere on your Blogger blog (or any HTML webpage for that matter).
Call external Stylesheet
Open your webpage's source code, and locate the <head> section. If you want to add these icons to your template like ours, you need to open your Blogger dashboard, and go into the Edit HTML. Once you've located the header section, copy and paste the following line of markup there.
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Make sure you copy the link as it is (including the http:// part). This is where the Font Awesome CSS file
is stored. You can download it to your own server if you like for greater speed.
is stored. You can download it to your own server if you like for greater speed.
Adding icons
You can view a list of available icons in Font Awesome here. Pick an icon of your choosing, and note down its CSS Class name (for e.g. fa-home or fa-arrow-down). Now, to use this icon, use the <i> tag as shown below.
<i class="fa fa-home"></i>
Editing icons
You can apply any CSS Style to an icon. Just take the class name, and write a new CSS style as shown below.
.fa-home {
font-size: 32px;
color: #033;
padding: 8px;
border: 1px solid #000;
float:left;
}
font-size: 32px;
color: #033;
padding: 8px;
border: 1px solid #000;
float:left;
}
No comments:
Post a Comment