In this article we are learning how to use icon fonts in a HTML design with a few simple steps. Follow our blog for more icon tips & tricks. Icon fonts are quickly becoming a web design trend and there is a good reason for that. Creating icons with icon font gives html designers the ability to manipulate the icon with CSS. The days of creating two different icon images for rollovers or effects are long gone. Now we can easily change color, size and even animate the font icons just as we would use other HTML elements.
How to use Icon Fonts in a HTML Design
So let go over how to implement font icon your HTML. Let’s learn how to use icon fonts;
Step 1: Load the font Via font-face
This is the same process as loading any other font using the @font face method. You are simply giving the font name to be used throughout the stylesheet and specifying the correct location of the font files.
Step 2: Create CSS rules That apply to every Icon
Now that we are loading the font into our HTML, we can start to define some other rules which will impact how our font look. We will use pseudo class: before because we do not want the markup to be in our HTML code. Name the main icon class something generic and straight forward, like icon.
Explanation for each of these CSS properties and their values
- Font-family- We are simply specifying what font to use
- Webkit-font-smoothing- using ant aliased value for font smoothing will make the icons looks smoother, especially on darker backgrounds.
- o-transform- Using scale(1) ensure us that the icon will be sized appropriately.
- Test-rendering – We use optimize legibility when we want to enable more advance font features, like ligatures and more accurate kerning
Step 3: Create Specific font Icon Classes
This is the fun part. We are going to define all font icon classes and which characters they will use. We are given the HEX values of each character in the demo CSS file provided, you just have to specify them in our stylesheet.
Step 4: HTML Mark-up
Thankfully, there is not much HTML mark up. We are simply going to use an HTML element such as span add appropriate class to it.
Example usage;
<span class=’icon facebook’> Like us on facebook(/span>
And now the icon should be showing up
Step 5: Customize your Font icons
Now you can start having more fun with these icons. For example, if you wanted to change color or size of the icon, you could just specify color or font size in the main icon class. If you need multiple colors or sizes, you could simply have multiple SSS classes as shown below.
Icon-green:before {color: #008000;}
Icon-red:before{color: #ff0000;}
Icon-blue-before {color: #0000ff;}
Icon – yellow : before { color : #ffff00;}
Icon-12: before {font- size: 12px; margin –right: 3px;}
Icon-24: before {font-size: 24px, margin-right: 6px;}
Icon – 36: before {font- size: 36px; margin-right:9px;}
Icon- 48: before {font –size: 48px; margin- right; 12px;}
How to find font icons?
If you are looking premium quality free font icons, please visit or search on Similar Icons font icons category. All of icons suitable for personal or commercial usage.
Thanks for read the “how to use icon fonts” article. For more tips and tricks please follow our blog also bookmark on your social media icons.