阿里巴巴字体图标使用

holly66
705 阅读1分钟

1. 从官网下载文件到本地

阿里巴巴矢量图标库网址 www.iconfont.cn/

先登录上去，如果没有注册账号也可以使用github,新浪微博快速登录

image.png

登录进去之后搜索想要的图标，将图标添加到购物车里，可以添加多个

image.png

添加完成后点击右上方购物车查看自己添加的图标，可以直接下载代码到本地

image.png

将下载的压缩包解压放入项目中就可以直接引用了

以下是下载好的文件，包含这些

image.png

2. 项目中使用iconfont

我们可以在demo_index.html中查看图标，也可以在官网查看，上面有三种引入方式

image.png

一般我们会选择第二种最简单的方式，类名引用

首先引入css样式，找到iconfont.css所在文件的路径，引入到项目

image.png

然后直接在i标签中添加class,固定格式：

<i class="iconfont 类名 "></i>

上述代码效果：

image.png

字体图标的样式跟文字一样可以直接修改，样式跟它的类名对应即可

image.png

image.png

3. 图标更新

我们第一次使用的图标是直接从购物车里下载到本地的，当我们做项目时会经常遇到图标不够用的问题，就需要重新添加图标，所以为了方便更新，我们就可以将需要的图标添加到项目中

image.png

后面图标更新后就不需要重新下载了，直接在图标项目中点击更新

image.png

打开css样式表复制下来，替换掉之前iconfont.css中的样式即可

image.png

然后就可以使用添加后的其他图标了

avatar
文章
阅读
粉丝