Use (fontello.com) font recommendations and tips for using icon fonts

Web Design in order to page beautiful, icons are indispensable, the use of the Web page icons are usually used pictures, the use of picture icons have many drawbacks, if you often make Web pages should have belly blame.

Disadvantages of using picture icons

1. The magnification icon must be re-plotted,
2. Change the color must turn on the drawing software re-color, and the different colors will correspond to a picture icon
3. More drawbacks not listed

If these icons can be like fonts, change the size, change the color, it is not too cool, the following text is a way to use the font of the icon in the Web page.

the following lazy people to build a station to introduce the use of the icon font (fontello.com) font use and Skills

First: Use Firefox, Google or 360 speed mode (note: Because the icon you choose to use local storage memory, which will be mentioned in the following how to use local storage on other computers open still show your selected icon) Open http://fontello.com/This icon font website, all in English, But do not understand English is not important, open the site with the mouse click on your favorite icons, all selected, click on the upper right corner of the Red download button, you can download to a compression bar, extracted, there are similar fontello.eot fontello.svg Fontello.ttf Fontello.woff four font formats.

Copy the following code into your stylesheet file, note that your font file path to the correct, according to the actual situation to modify the Src:url (' font/path

/* Icon font */@font-face {  font-family: ' Fontello ';  Src:url (' Font/fontello.eot ');  Src:url (' font/fontello.eot#iefix ') format (' Embedded-opentype '),       url (' font/fontello.woff ') format (' Woff '),       url (' font/fontello.ttf ') format (' TrueType '),       url (' Font/fontello.svg#fontello ') format (' SVG ');  Font-weight:normal;  Font-style:normal;}. ficon,[class^= "ficon-"],[class^= "ficon-"]:before,[class*= "ficon-"]:before {  font-family: "Fontello";  Font-style:normal;  Font-weight:normal;  Speak:none;  Display:inline-block;  Text-decoration:inherit;  Width:1em;  Margin-right:. 2em;  Text-align:center;  Font-variant:normal;  Text-transform:none;  Line-height:1em;  Margin-left:. 2em;} 

Call Method: Write a label like this on the page, the HTML tag can be arbitrarily selected, but the class name should be consistent with your definition above, such as:<span class= "Ficon" >& #xe813;</span>

Resolving IE6 7 Compatibility

Font icon under IE67 a little to do a bit of compatibility processing, otherwise the page can not display the icon, in the head area of the page paste the following code:

<!--[if Lt IE 7]> <style>. ficon{font-family: ' Fontello '}</style> <! [endif]-->

If your page is only for advanced browsers, you can use CSS pseudo-object selectors such as:. Icon-eye:before {content: ' \e839 ';}, regardless of the IE9 browser below.

How to make your chosen font icon open on another browser still displays the icon you selected

I haven't really tried it here. There is a compatibility scheme on browsers that do not support local storage, and it is interesting to try. This is only a browser that supports local storage, such as Firefox, Google, and so on.

Here are two commands: get local storage: Window.localStorage.getItem (' fontello:sessions:v4 '); set local storage: Window.localStorage.setItem (key : value), understand to see this can flash people, do not know can look down.

Take Firefox for example, open fontello.com, first select several icons, then F12 Open the console, click "Console" input command:window.localStorage.getItem (' fontello:sessions:v4 '); Fontello:sessions:v4 ' is the name, I was in the test when he was the name, if not, you can use the following code to all the local stored key value values are traversed out

    for (var i=localstorage.length-1; I >=0; i--) {        console.log (' + (i+1) + ') The key value of the data is: ' + localstorage.key (i) + ', the data is: ' + Localstorage.getitem (Localstorage.key (i)));    }

Copy the value of ' fontello:sessions:v4 ' to save the backup.

Open Fontello.com,f12 in other browsers that support local storage open the console, click "Console" input command window.localStorage.setItem (key:value) key and value to replace the actual value ,

Example: Window.localStorage.setItem (' fontello:sessions:v4 ', ' {' "font_size": +, "Sessions": [{"Name": "$current $", " FontName ":", "Css_prefix_text": "icon-", "Css_use_suffix": false, "hinting": true, "encoding": "PUA", "Font_fullname": "", "font_units": +, "font_ascent": 850, "font_copyright": "", "fonts": {"custom_icons": {"collapsed": false, "glyphs" : []}, "Fontelico": {"collapsed": false, "glyphs": [{"UID": "53ed8570225581269cd7eff5795e8bea", "selected": False, "code ": 59392," CSS ":" Emo-unhappy "},{" UID ":" 2BD5F98482D86649958312EA2AB5BB40 "," selected ": False," code ": 59393," CSS ":" Emo-laugh "},{" UID ":" 9BC2902722ABB366A213A052ADE360BC "," selected ": True," code ": 59407," CSS ":" Spin6 "}]}," Fontawesome ": {" collapsed ": false," glyphs ": [{" UID ":" 9dd9e835aebe1060ba7190ad2b2ed951 "," selected ": True," code " : 59392, "CSS": "Search"},{"UID": "ef74ff62feda486fd414410e782b598a", "selected": True, "code": 59460, "CSS": " Graduation-cap "},{" UID ":" 7fe35dea791456114c356934333b4171 "," selected ": True," code ": 59404," CSS ":" Renren "},{" UID " : "D1945696d6bbbf84e388df9961f26a37", "seLected ": True," code ": 59408," CSS ":" Sina-weibo "}]}," Typicons ": {" collapsed ": false," glyphs ": []}," iconic ": {" Collapsed ": false," glyphs ": []}," Modernpics ": {" collapsed ": false," glyphs ": []}," Meteocons ": {" collapsed ": false," Glyphs ": []}," Mfglabs ": {" collapsed ": false," glyphs ": []}," maki ": {" collapsed ": false," glyphs ": []}," zocial ": {" Collapsed ": false," glyphs ": []}," Brandico ": {" collapsed ": false," glyphs ": []}," elusive ": {" collapsed ": false," glyphs " : []}, "Linecons": {"collapsed": false, "glyphs": []}, "Websymbols": {"collapsed": false, "glyphs": []}}]} ');

If you re-delete the icon, you need to get the new value again using the window.localStorage.getItem (' fontello:sessions:v4 ') command.

Use (fontello.com) font recommendations and tips for using icon fonts