iconfont 在项目中使用阿里icon

3,179 阅读2分钟

在项目中使用icon是前端项目经常遇到的。一般会选择用图片,适合为数不多,或者设计图标复杂的情况,而现在越来越多的设计与前端会选择iconfont,至于iconfont是什么如何制作,后期会再出一篇文章,让设计与开发轻松自制iconfont。 阿里矢量图标库,截止写这篇文章的时候,已经有三百多万的图标,各种图形、风格,几乎项目想要的图标都可以找到,而且同一个图标可以选择颜色,做了几个项目,都是在阿里矢量图库找到合适的,设计小姐姐再也不用辛苦画了【撒花】 接下来,就来介绍一下项目中如何使用阿里的iconfont图标库,先看一下官网 www.iconfont.cn/?spm=a313x.… 打开官网 在home页搜索你想要的图标,

点击图标,加入购物车

点开购物车,添加至项目,没有项目可以新建项目,

如何在项目中使用:

在项目页,可以看到当前项目的所有图标。而开发项目要使用这些图标,可以选择在线引入,或者下载到本地。一般大部分项目都会选择下载到本地吧,因为iconfont在一些公司内网访问经常会受到极大限制。 方法一:直接引入,复制代码,添加到项目的css文件中即可

方法二: 点击下载到本地,下载icon文件,放入项目中

下载之后,打开下载的icon包,可以看到:

其中除了demo_*.html、demo.css这三个文件,其他的文件就是我们需要的。 拷贝icon文件放入到某个目录下,比如vue-cli3.0项目,我选择的是放入到assets/icon项目下,存放所有静态资源的地方。 使用,不管是方法一引入还是方法二,使用方法都是一样的 在css文件中添加复制的代码,在html中 其中,html标签可以随意选择,一般会选择i,iconfont 是通用class, ed-icon-icon-test 则代表了具体的图标,这个值可以从这边复制。选择【Font calss】或者【Symbol】,复制代码。class名在引入之前都可以自定义名称

或者你也可以通过unicode来定义图标,一般是选择icon class比较习惯

如何在vue 项目中使用iconfont 图标