How to use CSS font icons

Summary: For the traditional CSS sprite (CSS), most of the current Web site has been the main font icons, using FONT+CSS or font+html to develop, today summed up a bit, record the ~CSS sprite with background image positioning, compatibility good, The color of the icon is rich, but for site scaling, it will make the picture distorted, and not easy to maintain, and when we use the font icon to do this thing, the benefits are much more (but the font icon is a single color, generally can be ignored) 1. First from https://icomoon.io/Foreign font icon Gallery Very good download free icon library (you can also add the icon to add SVG format), but how to make the icon into a Web font, please see the following link http://www.flowerboys.cn/font/tutorial.html Change the icon to Font 2. From the Https://icomoon.io/app/#/select free font icon library, select the desired font icon library and then download it to bring the font into your own CSS directory font+html:html:

<ul class= "Layout" ><li><a href= "" ><i style= "color: #efe0ce; class=" Imooc-icon ">?</i> </a></li><li><a href= "" ><i style= "color: #ef7073; class=" Imooc-icon ">?</i> </a></li><li><a href= "" ><i style= "color: #78ade3; class=" Imooc-icon "></i>< /a></li><li><a href= "" ><i style= "color: #eae77f;" class= "Imooc-icon" ></i></a ></li><li><a href= "" ><i style= "color: #3c3c3c; class=" Imooc-icon "></i></a> </li><li><a href= "" ><i style= "font-size:30px; class=" Imooc-icon "></i></a> </li><li><a href= "" ><i style= "font-size:60px; class=" Imooc-icon "></i></a> </li><li><a href= "" ><i style= "font-size:90px; class=" Imooc-icon "></i></a> </li><li><a href= "" ><i style= "font-size:120px;" class= "Imooc-icon" ></i></a></li><li><a href= "" ><i style= "font-size:148px; class=" Imooc-icon "></i></ A></li></ul> open already downloaded font font icon demo.html inside there are related icon code f048, but the browser needs to add & #x才可以识别

　　

CSS: (paste only the CSS code used)

@font-face{font-family:"Imooc-icon";src:URL (".. /fonts/icomoon.eot ");/*IE9 compatibility Mode*/src:URL (".. /fonts/icomoon.eot #iefix ") format (" Embedded-opentype ")/*IE6-IE8*/, URL (".. /fonts/icomoon.woff ") format (" Woff ")/*Chrome, Firefox*/, URL (".. /fonts/icomoon.ttf ") Format (" TrueType ")/*Chrome, Firefox, Opera, safari,android, IOS 4.2+*/, URL (".. /fonts/icomoon.svg ") format (" SVG ");/*IOS 4.1-*/Font-weight:Normal;Font-style:Normal;}. Imooc-icon{font-family:"Imooc-icon";Font-style:Normal;Font-weight:Normal;font-size:64px;-webkit-font-smoothing:antialiased;/*anti-WebKit kernel browser aliasing*/-moz-osx-font-smoothing:Grayscale;/*anti-Mac browser aliasing*/}where #iefix resolve issues that cannot be displayed in IE6

Font+css:html:

<ulclass= "Layout">    <Li><Iclass= "icon Icon-heart"></I></Li> 　　 <Li><Iclass= "icon Icon-heart"></I></Li> 　　 <Li><Iclass= "icon Icon-heart"></I></Li> 　　 <Li><Iclass= "icon Icon-heart"></I></Li></ul>

Css:

@font-face{    font-family: "Imooc";    Src:url (".. /fonts/imooc.eot ");/* IE9 compatible *    /Src:url (".. /fonts/imooc.eot? #iefix ") Format (" Embedded-opentype "),    url (".. /fonts/imooc.woff ") format (" Woff "),    url (".. /fonts/imooc.ttf ") Format (" TrueType "),    url (".. /fonts/imooc.svg ") format (" SVG ");    Font-weight:normal;    Font-style:normal;}. icon{    font-family: "Imooc";    Font-weight:normal;    Font-style:normal;    -webkit-font-smoothing:antialiased;    -moz-osx-font-smoothing:grayscale;}. Icon-heart:before {/* for before pseudo-element please own Baidu * *    content: "\e600";}

　　

Second, CSS Sprite: According to the desired box width height with ps evenly cut the picture with a picture for the background of the icon to make small icons HTML code:

<ul class= "Sprite" > <li> <s style= "background-position:0 0;" class= "S-icon" ></s> <a HRE F= "" >adsf</a> </li> <li> <s style= "background-position:0 -40px;" class= "S-icon" ></s>　　　　; <a href= "" >adsfwfewe</a> </li> <li> <s style= "background-position:0 -80px;" Class= "S-icon "></s> <a href=" ">123123213213/a> </li></ul>

Corresponding CSS:

. sprite{margin:10px Auto;　　width:206px; border:1px solid #b51600;}.　　Sprite li{Cursor:pointer;　　height:42px; 　　width:206px;　　border-bottom:1px solid #911001; border-top:1px solid #c11e08;}.　　Sprite Li a {color: #fff;　　line-height:42px; font-size:14px;}.　　Sprite Li s{height:40px;　　width:24px;　　Display:block;　　margin-left:10px;　　margin-right:8px;　　Float:left; Background-image:url (".. /images/s-icon.png ");}

　　

How to use CSS font icons