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

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

阿里巴巴矢量图标库的使用一、引用线上图标库

1.登录阿里巴巴矢量图标库（可以微博登录），鼠标悬停在需要的图标，点击收藏入库（购物车图标），点击下载到本地或添加到项目

搜索你需要的图标并加入购物车

选好之后选择储存为新项目

生成在线链接，并复制到css中即可使用。

注意：在本地调试的时候（就是当你的浏览器网址是file协议开头的时候），

url(//)里双斜杠之前记得加上https:，像这样url(https://at.alicdn...)，

不然会用file协议访问链接就找不到。

二. 范例：

1.线上

1

2

3 矢量图

4

5

6 // 引用线上的图标库

7

8 @font-face {

9 font-family: iconfont; /* project id 238765 */

10 src: url(//at.alicdn/t/font_pzihjs6e7ki6bt9.eot);

11 src: url(//at.alicdn/t/font_pzihjs6e7ki6bt9.eot?#iefix) format(embedded-opentype),

12 url(//at.alicdn/t/font_pzihjs6e7ki6bt9.woff) format(woff),

13 url(//at.alicdn/t/font_pzihjs6e7ki6bt9.ttf) format(truetype),