Using HTML For Icon Font

With technology advancing so rapidly everyday, it’s hard to keep your website up to date with the latest technology.
You want users to come back to your website, right? Well, users are not going to come back to your site if it is slow! When users are on your page, the first thing they notice is how fast your web page loads, not the the web page design.

For this reason, many developers use what’s called a sprite image. A sprite image is simply a bunch of images compiled into one big image. The idea behind this is that you only having one HTTP request made instead of several, making the web page faster (the more HTTP requests made, the slower your site will be).

Icon Fonts

Let’s dive into icon fonts. What are icon fonts and how do you use them?

Icon fonts are exactly that: icons that are used as a font. Why use icon fonts?

• To enhance a word with an icon next to it
• To make the icon to stand an alone but still be functional

The down side to using icon fonts is they can only be a single color. Keep in mind that icon fonts will not replace sprites, however they do come in handy. Unlike sprites, icon fonts do not need to be positioned using image positioning. Icon fonts have a small foot print just like sprites – the more icons, the bigger the file size.

On my websites, I use icon fonts on some of my headers to make them stand out. There are a couple ways of implementing icon fonts. We will cover them below.

Installation

Embedding as @font-face on the Web

Below, we include the declaration of the font and where the web-font files are located:

@font-face {
	font-family: 'modern';
	src: url('modern.eot');
	src: url('modern.eot?#iefix') 
			format('embedded-opentype'),
		 url('modern.woff') 
		 	format('woff'),
		 url('modern.ttf') 
		 	format('truetype');
	font-weight: normal;
	font-style: normal;	
}

Include the icons in either HTML or CSS.

Method 1 (recommended) – Use the CSS content:before and data-icon attribute

<i class="icon" data-icon="(">Help</i>

.icon:before {
    content: attr(data-icon);
    font-family: modern;
}

Method 2 – direct embed in HTML, styling the element as font-family:”modern”;

<i class="icon">E</i>



.icon {
	font-family: "modern";	
}

strong>Embedding as SVGs on the Web

Method 1 – Embed vector data in your file. Open one of the pictograms in Adobe Illustrator (or similar), save to web and copy the SVG data. It should look something like the code below.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0.626 0.528 100 100" 
enable-background="new 0.626 0.528 100 100" xml:space="preserve">
<path d="M96.365,32.047l-64.22,64.22c-6.468,6.469-17.71,
5.391-25.257-2.002c-7.392-7.546-8.47-18.789-2.002-25.257l64.22-64.22  
c6.469-6.468,17.711-5.39,25.257,
2.002C101.756,14.336,102.834,25.579,96.365,32.047z M11.355,83.639  
c1.54,0,2.926-1.387,2.926-2.927s-1.386-2.926-2.926-2.926s-2.926,1.386-2.926,
2.926S9.815,83.639,11.355,83.639z M13.049,73.166"></path>
</svg>

Method 2 – Embed, link to a svg file like you would an image

<embed src="modern.svg" type="image/svg+xml" />

Icon fonts have many uses, including iPhone, iPad and Android apps to name a few. There are many free and paid icons fonts out there.

Conclusion

So this is a basic overview of icon fonts and some of their uses. I hope this has proven to be helpful for you!