A better way to deal with font icons

When font icons first appeared, the life of front-end developers became a lot easier. Using PNG for sprites to display an icon or a special character is no longer a golden rule. Instead, you can use SVG or font icons, as these are more flexible and easy to manipulate (in case you deal with animation, style customization or any other related work).

Today, we will speak about font icons, how to use them and achieve a better experience and implementation (front-end and back-end).

Initially, lots of web developers were using HTML HEX codes (then Unicode pseudo-classes) to display simple shapes. It was easy to implement, but no cross-browser compatibility was guaranteed. Once font icons became widely used, everyone understood that they will help us create interesting, flexible UIs.

When you work a lot with font icons, there might be some time consuming issues, one of these is: you have lots of CSS classes (that never end), especially when you have 700+ icons. In the same time, the more classes you have the bigger is your CSS file, that can increase the page loading time of your web page (until this file is cached).

This is not vital, but you can achieve a better loading time and optimize your web site or page using some tips and tricks.

Front-end

We will take Font Awesome as a reference. You can find the whole library here. Let’s have a look at the CSS file, where we’ll find plenty of CSS classes that define the actual icons:

.fa-glass:before { content: "\f000"; }
.fa-music:before { content: "\f001"; }
.fa-search:before { content: "\f002"; }
...

All these classes represent 87% (26kb) of the Font Awesome library. When you have at least 2-3 font icons in a project, this can have a negative impact.

The solution is quite simple, we will skip these classes and make a smart move.

First of all, we’ll initialize the font icon using a data attribute (not a class), for example data-fa

[data-fa] {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
}

Then, we’ll assign it to a HTML tag, for example

 <i data-fa></i>

Now, to define the icon font, we will assign a HEX code value to our data attribute and define it from Unicode. Example: CSS Unicode ‘\f13c’ is equivalent to ‘&#xf13c’ HEX code.

<i data-fa="&#xf13c"></i>

Our final step is to link our HEX code (assigned to our data attribute) with CSS to display the icon we need.

	[data-fa]:before {
		content: attr(data-fa);
	}

This method is simple and implies little CSS code to display lots of icons. All these HEX codes can be confusing at first sight, but there is a simple solution for that. We can have a demo resource with all the icons, their titles and corresponding HEX codes. Consequently, we can search them by name and pick up the code we need.

Let’s proceed to back-end side.

Back-end

For this example we will consider a PHP application. We have a HTML syntax that we need to re-use and make it descriptive.

	function fa_icon( $icon ) {
		$fa_icons = array(
			'css3_logo' => '&#xf13c',
			'github_logo' => '&#xf09b',
			'arrow_left' => '&#xf060'
			...
		);

		printf( '<i data-fa="%s"></i>', array_key_exists($icon, $fa_icons) ? $fa_icons[$icon] : 'Error' );
	}

Now, to use a font icon in your project, you simply have to call the function with the corresponding parameter.

You can use this function in any project you need. For example, if you deal with WordPress, you can transform your function into a shortcode, like this one:

		function fa_icon( $atts ) {
		   extract(shortcode_atts( array(
		        'icon' => ''
		    ), $atts ));

	    $fa_icons = array(
			'css3_logo' => '&#xf13c',
			'github_logo' => '&#xf09b',
			'arrow_left' => '&#xf060'
			...
		);

	    return sprintf( '<i data-fa="%s"></i>', array_key_exists($icon, $fa_icons) ? $fa_icons[$icon] : 'Error' );
	}
	add_shortcode( 'fa', 'fa_icon' );

To use this new shortcode, you have to follow this structure:

	[fa icon="css3_logo"]

Conclusion

This little experiment demonstrates that we can avoid hundreds of CSS classes that define diverse icons and have a simple and nice CSS file. It might be not so descriptive and a little confusing, because every icon has its own HEX code. But this is compensated by the development part, where we can create simple and descriptive functions.

In the same time, we’re looking for new ideas and alternative implementations, that will improve the work with icon fonts. Looking for your suggestion!