css3 小图标运用 1.图片合成 2.font+html @font-face 3.font+css

2.font+html

先从网站下载小图标获取 fonts目录 然后引入

src: url("fonts/icomoon.eot?") format("embedded-opentype"),//重要的是？号
 url("fonts/icomoon.woff") format("woff"),
 url("fonts/icomoon.ttf") format("truetype"),
 url("fonts/icomoon.svg") format("svg");

之后设置元素的字体为所设置的命名就可

@font-face{

font-family:"imooc-icon";//命名
src: url("fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("fonts/icomoon.eot?") format("embedded-opentype"),//重要的是？号
url("fonts/icomoon.woff") format("woff"),
url("fonts/icomoon.ttf") format("truetype"),
url("fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
i{
font-family: "imooc-icon";
font-style: normal;
font-weight: normal;
font-size: 100px;
color:red;

-webkit-font-smoothing: antialiased;   

-moz-osx-font-smoothing: antialiased;//可以让字体更清晰

}

i标签中加入  &#x+16进制码   &#x必须写

3.font-css

@font-face{

font-family:"imooc-icon";//命名
src: url("fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("fonts/icomoon.eot?") format("embedded-opentype"),//重要的是？号
 url("fonts/icomoon.woff") format("woff"),
 url("fonts/icomoon.ttf") format("truetype"),
 url("fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}

.icon{  此处用class=icon直接加入标签中  如<i class="icon"> 此时只要加入icon的标签都拥有可以写图标的能力
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height:1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-heart:before,icon-heart:after{      再在标签中加入icon-heart  如<i class="icon icon-heart ">  就可以引用特定的图标 如heart

content=" \ +十六进制"                    此处可以设置图标的颜色大小等

}