Fonts icon
Pictures have many advantages, but it is obvious shortcomings, such as images not only increases the total file size, but also adds a lot of extra "http request", which will greatly reduce the performance of the web page. More importantly, the picture can not be good, "Zoom", as zoom in and out distorted picture. We will learn later moved responsive end, we hope that the icon can be scaled in many cases. At this point, a very important technology appeared, the amount is not there, is there before, is the new "concubine" friends. . This is the font icon (iconfont).
Fonts icon advantage
Can make the same thing can be done with the picture, changing transparency, rotation, etc ..
but in fact the essence of the text, can be very casual change color, shadows, transparency, and so on ...
itself smaller, but carry the information is not cut.
Almost all browsers support
mobile end devices necessary medicine ...
Fonts icon using the process
Design Fonts icon
If the icon is our company individually designed, it would need a first step, this work belongs to UI designers, they create icon icons illustrator or vector graphics software such Sketch years, such as the following figure:
After saving for the svg format, then give us a front-end staff enough.
In fact, the first step, we do not care, just give us these icons can be, if the icon is a popular online already there, you can skip the first step to the third step.
Upload generation font package
When the UI designer svg file to us, we need to convert the font file page we can use, and compatibility needs to be generated it is suitable for all browsers.
Recommended sites: http://icomoon.io
icomoon font
IcoMoon was founded in 2011, launched the first custom icon font generator, which allows the user to select an icon they need to make them into a font. A wide range of content, very comprehensive, the only regret is that the foreign server, open a slower speed.
Recommended sites: http://www.iconfont.cn/
Ali icon font font
This icon is an icon font font font Ali Mama M2UX, including Taobao and Ali Mama icon library icon library. AI can make use upload icon generation. A word, free, free! !
Fontelles
Online customize your own icon font character font icon, you can also download the entire set of icons directly from GitHub, the project is open source.
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
This is one of my favorite fonts, and updated faster. There are already 369 of the icon.
Glyphicon Halflings
Free use of the font icon in Bootstrap. It comes with more than 200 icons.
Icons8
PNG offers free download, pixel mighty to 500PX
Download compatible font package
Just upload is completed, the site will give us the UI do svg convert the picture to our font format, then download just fine
Of course, we do not need their own special icon, the icon is to use the Internet to find a few, two or more steps may be omitted, directly to the site just like looking directly download it.
Font into the HTML
After getting the archive, the last step is the most important step, is to have the font file, we need to introduce into our pages.
-
First, the following four files into the fonts folder inside. Popular practices
The first step: Declare font style in which: tell people our own font definitions
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
The second step: to use the font box
span {
font-family: "icomoon";
}
Third Step: Add inside the box structure
span::before {
content: "\e900";
}
或者
<span></span>
The new icon is added to the original library inside
If you work in the original font icon is not enough, we need to add a new font icon, but the original can not be deleted, continue to be used, then we need to do
The compressed inside selection.json new upload, and then select the icon you want new, new download archive, replacing the original file.
