CSS3 iconfont矢量字体图标的使用

iconfont集成到项目中

1.使用awesome

首先打开Font Awesome, 为 Bootstrap 而创造的图标字体

然后可以选择下载最新版或者早期版本，直接下载即可。

将目录中的fonts和css分别放在同一目录下（推荐），如果不是同一路径，需要在css @font-face中修改。

将css引入到页面中，建议使用min版。

到此，就将awesom集成到项目中了，接下来再次打开awesome网站，您可以在图标集中浏览awesome图标。

在页面对应的位置（建议使用i标签），将你选择的图标名称作为对应的标签类名，保存，预览。

2.使用Iconfont-阿里巴巴矢量图标库

首先在页面输入搜索对应的图标，中文英文都可以；

然后将搜索到的图标，选择一个添加到库，你可以持续添加。

添加完成后，右上角有一个购物车的按钮，你可以打开购物车查看选择的图标。

接下来值得一提的是，如果你不清楚是否后续还需要其他的图标，你可以选择添加到项目，方便后续增加图标。提示登录的话，登录就可以。

到个人项目中选择对应项目，此处还有一个选项可预览，unicode和font class模式。

选择后就是下载了，下载后将fonts和css添加到项目中并且引入。

然后参照文件中的demo，预览对应的图标，选择unicode或者font class模式，仍然建议使用i标签。

如果是unicode，对应的图标unicode可作为i标签的内容，font class与使用类名方式。