阿里巴巴Iconfont的使用

图标字体的使用越来越广泛了，因为是矢量的，缩放不变形，同时又具有字体的性质，这样处理图标就像出题字体一样方便。

提供这种服务的网站也越来越多，阿里巴巴提供的不错，字库齐全。官网地址：http://www.iconfont.cn/

可以看到提供了很多图标：

我们前端人员怎样使用呢？

进入官网之后，先登录，这里我们就用微博登录。不知道我这里为啥淘宝登录无法使用。

通过网站上方的搜索或者直接选取图标，比如我要使用这个loading图标，鼠标移到图标上就会有三个选项，点最左边购物车图标收藏下来。

然后你就看见用户名右边那个购物车就有你收藏的图标了，你可以下载使用了。

下载之后里面就有字体文件和使用的demo文件，可以尽情使用了。

iconfont.css里就是我们要用的，根据你下载的图标代码不同。

@font-face {font-family: "iconfont";
  src: url(‘iconfont.eot‘); /* IE9*/
  src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
  url(‘iconfont.woff‘) format(‘woff‘), /* chrome、firefox */
  url(‘iconfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url(‘iconfont.svg#iconfont‘) format(‘svg‘); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.icon-back:before { content: "\e679"; }

.icon-loading:before { content: "\e64f"; }

.icon-check:before { content: "\e645"; }

.icon-like:before { content: "\e669"; }

.icon-edit:before { content: "\e649"; }

你的html里

<i class="iconfont icon-back"></i>

就这么简单！

而且你下载的demo.css里面还有一个玉伯维护的reset css。这算是福利么？