阿里 图标 icon iconfont 实现离线使用

时间:2024-03-23 07:15:25

1.将你项目中的图标打包下载下来

阿里 图标 icon iconfont 实现离线使用

2.下载到本地之后,将离线文件复制到你的项目路径下

这是下载来的压缩包完整的文件列表

阿里 图标 icon iconfont 实现离线使用

这是我复制到项目对应路径里文件,其中红框标记的五个文件是必须要的

阿里 图标 icon iconfont 实现离线使用

3.导入ali图标css文件

在项目主文件main.js(vue)中, 导入ali 图标 css文件,且移除之前添加的在线使用ali 图标的引用链接

阿里 图标 icon iconfont 实现离线使用

阿里 图标 icon iconfont 实现离线使用

4.直接使用ali icon class

这是icongont.css文件,里面存放了所有已经上传至该项目的icon的使用类名和对应的content。可以自己再自定义每个icon的样式名称

阿里 图标 icon iconfont 实现离线使用

4.1 直接在html里使用

阿里 图标 icon iconfont 实现离线使用

4.2 直接在css里使用

类名可自定义,第二个红框是固定用法。content对应的是你上传在项目中的某个icon的Unicode对应的icon的unicode

阿里 图标 icon iconfont 实现离线使用

5. 如果项目里的icon有更新,需要重新下载项目icon包,替换之前的文件