Usually in most web applications icons are used for an appealing design. But icons have the disadvantage that you can’t change the design easily without replacing the hole set of icons especially if you need different colors or a different size of your iconset. The last one becomes a big problem when you try to develop a responsive web design.
A solution is the usage of fonts instead of icons. Fonts have the advantage that you can control the color, size, mouse over or click events for a CSS. So fonts provide a much better solution for modern web design as icons. There are a lot of free fonts sets available providing nice sets of symbols like typicons.com.
The icon fonts are typically provides in different file formats:
- eot – embedded OpenType
- woff – web open font format
- ttf – truetype
- svg – svg format
To add the font files the following CSS declaration is used:
/* @FONT-FACE loads font into browser */
@font-face {
font-family: 'typicons';
font-weight: normal;
font-style: normal;
src: url('typicons.eot');
src: url('typicons.eot?#iefix') format('embedded-opentype'),
url('typicons.woff') format('woff'),
url('typicons.ttf') format('truetype'),
url('typicons.svg#typicons') format('svg');
}
/* :before psuedo-selector inserts and styles icon */
.typcn:before {
font-family: 'typicons';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
height: 1em;
font-size: 1em;
text-align: center;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
The css class ‘typcn’ defines the font. So now you can define a single symbol of the font to be used in a custom css class. See the following example:
.typcn-arrow-down:before {
content: '\e009';
}
Now you can include any icons you want on your site. Just add a span or i tag with the appropriate class name:
<span class="typcn typcn-arrow-down"><span>