简介

什么是图标字体？

图标字体不同于标准的字体数字的字符，是一种包含符号和字形（如箭头、文件夹、放大镜）的字体文件。

例如：

图标字体的使用就像和使用网页字体一样，个人理解就是把一些图标以字体的形式保存在一个字体文件里面，然后再以调用字体的方式来使用。具体使用方法详情可以去看看css中的@font-face的用法，在这里就不详细解释了。

免费图标字体可以完美的运用在你的界面设计中，可以让你更快捷的设计出更精彩的界面。

很多UI框架都提供了 图标的直接 引用

比如bootstrap。

使用方法

图标字体目前基本上有两种方式。

一种是引用框架js或者字体库，然后让class= 我们需要的样式名

例如：@import url(http://weloveiconfonts.com/api/?family=zocial);/* zocial */[class*="zocial-"]:before {font-family: "zocial", sans-serif;}

<ul> 

<li class="zocial-twitter"></li>

<li class="zocial-flickr"></li> 

<li class="zocial-lastfm"></li> 

<li class="zocial-reddit"></li>

</ul>

第二种是选中我们需要的图标生成我们自己的字体库，然后下载到本地，引用后，直接使用编号

ps：有一些网站只能下载到svg格式的文件，这些文件的使用方法也是第二种，需要到另外的网站上上传制作 字体库。

http://fontello.com/ 就能制作

选中完后会生成编码，要记住哪些编码对应哪些图标

在css中引用

	/*Entypo font*/
@font-face {
    font-family: "FontomasEmtypo";
    src: url("entypo/fontomas-webfont.eot");
    src: url("entypo/fontomas-webfont.eot?#iefix") format("embedded-opentype"),
         url("entypo/fontomas-webfont.woff") format("woff"),
         url("entypo/fontomas-webfont.ttf") format("truetype"),
         url("entypo/fontomas-webfont.svg#FontomasCustomRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}

html中引用：

<div class="box">
  <span class="key">!</span>
  <span class="fontomas"> ! </span>
  <span class="hex"> ! </span>
  <span class="cssContent">content:"!"</span>
</div>

图标库收集

下面就列举可以制作或者可以下载svg文件的网站：

bootstrap

http://v3.bootcss.com/components/

WE LOVE ICON FONTS

链接：

http://weloveiconfonts.com/

Fontello