( . 1 ) the HTML + font by:
Modify the color of the icon simply modify the font color, change the picture size simply modify the font size.
About font picture, we can produce their own, can also be downloaded from the Internet ( https://icomoon.io/app/#/select ), FontAwesome ( online icon font library, but limited resources ) and so on.
( 2 ) IcoMoon is an online icon font generator. It allows us to set generated through personalized ICON font, we can upload local ICON resources can also be used IcoMoon rich material to us, and ultimately generated
ICON font for us to choose a variety of formats ( EOT, SVG, WOFF, TTF ). Referring specifically converting step https://www.jianshu.com/p/86fca912fd1d , after conversion to download.
(3) After unzip the downloaded archive, copy Fonts , css files to the same file (mainly because the css file URL set), introduced in the page css files,
(4) In reference to the desired page, the corresponding tag is added directly to the class attribute, a reference to the style.
.icon-trash-can: before pseudo-element to generate a character icon, which "before" represent the characters appear on the left, "the After" appears on the right.
Advantage (5) character icons
It can be easily scaled arbitrarily; easily change the color; easily shadows; can have the effect of transparency;
Can be made with the same picture can do (change the transparency, rotation, etc.);
Itself is smaller, but the information carried and not cut.
FIG bit comparison: the bitmap image does not scale very well, when the enlarged image is distorted (i.e., blurred), when the image
Pixels will be wasted when to zoom out. And load each image needs a " HTTP request", and therefore drag
Slow the whole time the page is loaded.