Font Awesome Icons are best alternatives to the picture for the menus and social icons of your blog or website. Previously, blogger used jpg or png pictures to show the symbol of social share icons such ass Facebook, Twitter, Google Plus and so on. Using pictures make the loading speed slow and dull. Due to this drawback, font awesome icons are developed as a good alternate to images.
Basically font awesome icons are the production of CSS and can be used easily with HTML, PHP, Java and many other programming languages. The only thing we have to do is to add a CSS Style Sheet in source code and the code of desired icon.
Why & How Should We Get Font Awesome Icons
As I already said that font awesome icons are the best alternate to images used with menus and for social icons. These icons are vector image that are very tiny and free of any burden. Therefore, these will not reduce the blog loading speed. Moreover, these icons enhance the charm and attraction of navigation bar and social share icons. Despite of these amazing features, all font awesome icons are absolutely free and you do not need to pay to enjoy these vector images. Today, almost every developer try to add font awesome icons in his website due to their unique features.
- Go to the official website of font awesome icons to get complete list of all categories.
- Click on any icon to get its code.
- For example, if you click on "bicycle" icon, it will give you this code:
You can skip aria-hidden="true", using only <i class="fa fa-bicycle"></i>
Enabling CSS Font Awesome Icons In Your Blog
- First of all, make sure that your blog must have CSS Style Sheet to support all the font awesome icons. For this purpose, go to "Template" >> "Edit HTML".
- Click anywhere in code and press "Ctrl + F" (Mac users should press "Command + F")
- A search bar will appear. Write font-awesome.min in this bar and hit enter.
- You will find the following link if style sheet is already to your blog.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
If it is not added then you can copy and paste the above mentioned code under <head> tag in your template.
Adding Font Awesome Icons In Navigation
Most of the templates support double navigation bars which are top navigation and main navigation. Both these menus can be decorated with font awesome icons. As we go in detail, we know that some of the templates support menu in its source code (In Edit HTML Section), and some templates support menu designing through link list (In Layout Section). Here, we will discuss both the methods in detail.
Navigation Through Link List (Layout Section)
It will be a little bit tricky if your template support top and main navigation through link list in layout section.
- Go to the "Layout" and click navigation related gadget.
- A pop window will open where you can configure your complete menu.
- Suppose you are adding font awesome icon for home page of your blog. Write <i class="fa fa-home"></i> Home in "New Site Name". Paste your blog homepage link in "New Site URL" and then click "Add Link".
- Save this setting, reload your blog and look for the desired results. You navigation must show a home icon in menu.
Similarly you can add rest menu items one by one using this method for whole navigation.
Navigation Through Source Code (Template Section)
This method is quite simple and easy to understand.
- Go to "Template" >> "Edit HTML" and press "Ctrl + F" to bring a search bar in coding area.
- In this bar, type any unique word that is included in menu to reach the navigation part.
- In my case, I will type "Skin Tips" to go directly to the navigation.
- You will find clean coding here which will look like this:
<li><a href='http://www.getperfectbeauty.com/search/label/Skin'>Skin Tips</a></li>
- You just need to add <i class='fa fa-leaf'/> in the above line before "Skin Tips" to make it look like this:
<li><a href='http://www.getperfectbeauty.com/search/label/Skin'><i class='fa fa-leaf'/>Skin Tips</a></li>
- Click "Save Template", reload the page and see your desired results. There will be an icon with 'Skin Tips' in navigation bar.
Bottom Line
After making these changes, you and the visitors of your website will see a font awesome icon in the navigation with each menu item which you have decorated with font awesome icons. Post your comment below to give valued feedback or ask a question in case of any confusion.
No comments:
Post a Comment