A quick introduction to Icon Fonts and How to use it?

0
340
a-quick-introduction-to-icon-fonts-and-how-to-use-it

Now a day you can see ICON FONTS in many websites. I have seen that many WordPress themes have an option to use icon fonts (for example you can find it in Visual composer plugin). These things prove that icon fonts have occupies a vital role in website design.

So now I am going to show you how to use icon font on your website. For that, I am going to use one famous icon fonts which are Font awesome icons.

Before going to the tutorial I have to tell you, what are icon fonts? And why you need to use it?

What is icon Font?

Icon fonts are nothing it’s just a font. But it didn’t contain letters or numbers, it contains only symbols and glyphs. You can apply different style for these icon fonts as you like to apply the style to regular text.

Why do you need to use it?

It is a common and basic question. Before you start using one new thing you have to ask why. I have one simple example to answer this question why. I am sure today 90% of the website has social media buttons. In past days we have used the social media icons and made the sprite image. We have used that sprite image wherever needed in websites. We needed to do two style icons for hover function and also we needed to use background position. That image also took some amount of sizes (in kb).

icon-font

Icon fonts are the replace for that kind of sprite image. These icon fonts have many types of symbols. You can use it and style it like you do for text. It is not an image so you can resize it, color it and also you can apply different types of hover effect using the CSS only.

How to use it?

As said before I am going to use one famous icon fonts (Font awesome icon) and demonstrate you.

Font Awesome Icons:

It is one of the famous icon fonts. Many websites have built with font awesome icons.  You can CDN or download it from their website (http://fontawesome.io).

If you will use CDN it will be easy, you just need to put the CDN link inside the <head> and can develop the other things.  Or if you thought “No I do not want CDN, I will download and use it” like this, it is also easy method. Just download it and in the downloaded folder, you can find CSS and fonts folder (If you want LESS & SCSS, it is also there).  Just copy the fonts folder and place it near CSS folder in your project. Likewise, copy the font-awesome.min.css file from CSS folder and paste it into your project CSS folder. Well done now inside your <head></head> tag give the path of the CSS file.

Yeah, you have done it! Now you can able to use these icons in your website wherever needed.

Next, how to use it in your HTML?

It’s very simple. You can find the icon set in this link (Font awesome icon set). Here you can select your desired icon and you can see the <i></i> tag. Just copy that tag and use it wherever you wanted. (Note: important part is class name)

I have selected the bell icon font and I am going to use it for notification button.

font-awesome-icon

This is my HTML

 

This is CSS where you can see how I write style for the icon

Output:

icon-font-output

LIVE DEMO

That’s it. I hope you will find it this information very helpful. Please share this information with your friends and colleagues.

If you know about any other Icon fonts (or) do you have any doubts? please leave it in below comment section.

LEAVE A REPLY