iconfont-阿里巴巴矢量图使用

一、iconfont的使用

1、登录http://www.iconfont.cn/ 阿里巴巴矢量图标库，github或微博登录

2、找到自己需要的图标

 

选择自己喜欢的图标 然后点击购物车

二、生成代码

点击右上角购物车图标

点击下载代码，得到zip包，解压即可获得需要的文件

三、 使用：

将iconfont.css导入你的css文件。

/*
URL为项目内调用字体的路径
*/
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1491967237541'); /* IE9*/
src: url('iconfont.eot?t=1491967237541#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1491967237541') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1491967237541') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1491967237541#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*

*/
.icon-wxbsousuotuiguang:before { content: "\e620"; }

在html调用时：
<i class="iconfont icon-wxbsousuotuiguang"></i>

 

此时就可以在页面生成搜索图标。