使用阿里字体图标IconFont

阿里图标官网地址:IconFont阿里巴巴矢量图标库

1、选择图标,加入购物车

image.png

image.png

2、导入购物车图标到项目

image.png

image.png

3、下载图标文件到本地

image.png

下载下来的是一个压缩文件,解压

4、添加字体图标文件到项目

我在项目中的 assets 文件夹下创建一个 fonts 文件夹,然后把下载下来的文件,复制到 fonts 文件夹内即可


image.png

5、项目中使用 (这里以VUE项目为例)

全局引入:在main.js中引入相对路径.css.js(css普通图标 js彩色svg图标)


image.png

也可在对应vue页面引入


image.png
image.png

图标对应样式和名字可在下载包的html中查看


image.png

追加图标:如果项目进入开发阶段了,发现图标不够用,那么只需要往我们创建的图标项目中添加图标,然后重新下载文件,然后覆盖原有的 fonts 文件下的文件即可。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容