阿里巴巴矢量图标库的使用，超详细用法

阿里巴巴矢量图标库的使用

官网地址： iconfont 阿里巴巴矢量图标库

1. 登录
2. 在页面中选择喜欢图标库点进
3. 鼠标悬停想要的图标 选择添加入库
   
4. 入库成功后 本图标会有一个虚线框 右上角的库图标会有个数的小红点
   
   
5. 点击购物车图标 选择添加至项目（如果没有就创建一个）
6. 确定 就会跳转到我的项目页面 选择图标 添加入库 选择 Font class
   
7. 点击下载至本地
8. 下载完成后，打开压缩包，只解压一个iconfont.css文件到页面要用到的css包里
   

然后开始在代码中操作

9. 在head中导入iconfont.css文件
   官网有三种方法，在导入包后三种方法都可以用，这里就举第一个例子吧

• 第一步：拷贝项目下面生成的font-face

/* 注：官网里的url没有 http:// 在代码里都得加上 */
@font-face {   
    font-family: 'iconfont';
    src: url('http://iconfont.eot');
    src: url('http://iconfont.eot?#iefix') format('embedded-opentype'),
    url('http://iconfont.woff') format('woff'),
    url('http://iconfont.ttf') format('truetype'),
    url('http://iconfont.svg#iconfont') format('svg');
}

• 第二步：定义使用iconfont的样式

/* 要修改这个的样式 得把引入的iconfont.css包放在自己的css文件上面 */
.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;
    }

• 第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xe663;</i>

i标签里的代码来源于 Unicode 的代码

这样之后打开页就能显示啦！！！
这样的图标相当于文字，文字有的样式，图标也能使用，样式的改变在第二步的代码中设置哦！！！

因为一直没找到官网其他解释的地址，所以用图片展示吧：