Font font small icon application in CSS

We know that there are many ways to upload a small icon in the page, for example, we use more CSS Sprite background image positioning, that is, many small icons integrated into a large picture, and then use CSS to locate the background. There is also a more modern way to use the font font icon, which uses the @font-face principle to load the Icon font library, and then invoke the icon.

Using CSS Sprite Way is very convenient, can have a lot of colorful icons, and compatibility is good, but the disadvantage is that the icon can not zoom, or zoom will be distorted, and also inconvenient to maintain, modify an icon to the whole large picture on the line to modify, and positioning pixels need to use the PS tool to determine the location. The use of the Icon font library is increasingly favored by developers, its maintenance is simple, and the icon scale free, at any time can display High-definition icon, you can add shadow effect and animation effect, settings are also very convenient, the only close is the icon color is relatively single, is set when only set an icon for a single color. Let's take a look at how to use the Font font small icon.
Html

At present there are many Fonts icon library, there are charges are also free to use. Common Icomoon,font-awesome and Glyphicon Halflings,glyphicon are free when used under bootstrap. Of course, the domestic Ali department also opened its own icon library.
This article explains using the Icomoon font library, we can select the Favorite font icon on the official web site and then download and deploy to the project, of course, can also make their own icons and upload to the official web. Download the good font library, in a fonts/folder. Let's start with the HTML structure:

<ul class= "Icons" >
<li class= "sp" ><i class= "Icon-spades spades" ></i> spades k</li>
<li class= "Red" ><i class= "icon-file-picture" ></i> photo </li>
<li><i class= "Icon-tablet" ></i> ipad</li>
<li><a href= "#" ><i class= "Icon-bubbles" ></i> comments </a></li>
</ul>

We add <i> to the element Li in the HTML code above, and then add the class attribute, which corresponds to the font icon style in the CSS file.
Css

First we use @font-face to name the font, and the loaded font file, we need to load multiple font files to be compatible with each browser and system. Then define class contains icon style, note that the use of anti-aliasing, that is, the image will not be magnified when the edge sawtooth phenomenon, and then use pseudo class, set content that is the icon contents.

@font-face {
font-family: ' Icomoon ';
Src:url ('.. /fonts/icomoon.eot?42vx6u '); /* IE9 Compatibility Mode * *
Src:url ('.. /fonts/icomoon.eot?42vx6u#iefix ') format (' Embedded-opentype '),
URL ('.. /fonts/icomoon.ttf?42vx6u ') format (' TrueType '),
URL ('.. /fonts/icomoon.woff?42vx6u ') format (' Woff '),
URL ('.. /fonts/icomoon.svg?42vx6u#icomoon ') format (' SVG ');
Font-weight:normal;
Font-style:normal;
}

[class^= "icon-"], [class*= "icon-"] {
font-family: ' Icomoon '!important;
Speak:none;
Font-style:normal;
Font-weight:normal;
Font-variant:normal;
Text-transform:none;
Line-height:1;

/* Anti-aliasing processing =========== * *
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

. icon-spades:before {
Content: "\e900";
}
. icon-file-picture:before {
Content: "\e901";
}
. icon-tablet:before {
Content: "\e902";
}
. icon-bubbles:before {
Content: "\e903";
}

Then, we run the next HTML page, can not see a few icons, convenient and practical bar.
If you want to define an animation effect for an icon, you can use CSS to implement it.

. spinner{
-webkit-animation:spinner 1s infinite linear;
Animation:spinner 1s infinite linear;
}

@-webkit-keyframes spinner{
0%{
-webkit-transform:rotate (0DEG);
Transform:rotate (0DEG);
}
100%{
-webkit-transform:rotate (359DEG);
Transform:rotate (359DEG);
}
}

The above code defines the icon rotation animation, we can combine JS to achieve this effect: when the mouse on the icon to slide the display icon rotation animation, when the mouse left, stop rotating animation. This effect of the code you can refer to the source in the demo. Demo I also added font awesome font map and glyphicons Font Chart example, you can view demo or download source to understand.