CSS3—字体图标的使用以及常用的网站

• 这里就拿icmoon图标举个例子 http:/licomoon.io
  1.首先输入网址打开（由于是国外的服务器，所以会有点慢）
  2.点击 icoMoon App
  3.点击下载
  4.解压
  5.将fonts文件夹下的四个文件复制到你所创建的项目中（这里一般是现在你项目下面新建一个fonts文件夹，然后将这四个文件粘贴过去）
  6.在你使用字体图标之前，你必须先声明样式 在你的css文件里添加如下代码：

@font-face { /*声明字体图标样式*/
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?1x1j55');
  src:  url('../fonts/icomoon.eot?1x1j55#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?1x1j55') format('truetype'),
    url('../fonts/icomoon.woff?1x1j55') format('woff'),
    url('../fonts/icomoon.svg?1x1j55#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

注： 我这里的路径url 进行了修改，这里特别要注意路径问题。我的fonts文件不在css下面。

7.如果你找不到字体图标样式声明的代码，你可以点开你之前解压的文件夹，里面有个style.css里面就有源代码
8.使用字体图标 假如我要添加购物车这个图标：

1. 首先找到代码
2. 在购物车前面加一个 i 标签，在标签里添加
3. 在对应的css文件里进行修改
4. 注：这样就算初步完成了字体图标的使用，因为他是字体图标，所以很多样式我们可以自己进行修改。

• icomoon字库 : http:/licomoon.io
  lcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

• 阿里iconfont字体库 : http://www.iconfont.cn/
  这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费！ 推荐网站:http://www.iconfont.cnl

• fontello : http://fontello.com/
  在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。