最近项目中要使用离线图标字体,项目是基于iview+typescript的。现将怎么使用离线图标字体进行如下说明:
- 进入官方图标库
打开图标网站https://www.iconfont.cn/,进入官方图标库
- 选择所需图标
选择需要的图标,支持不同的图标库多选
- 保存所选图标
点击购物车,进入本次所选所有的图标
4.下载图标离线字体资源包
对当前所选择的素材进行下载,有“下载素材”、“下载代码”、“添加至项目”3种
下载素材是将图标以“SVG、AI、PNG”后缀的资源进行下载
下载代码是将当前所选图标的资源进行打包下载
添加至项目是先把多个图标保存至“我发起的项目”新建的图标项目,对图标项目资源打包下载,也可以点击所需的单个进行下载
我是将所有素材建个“顶天项目”进行保存,从“图标管理”进入我发起的项目,点击“下载至本地”,弹出下载地址选择页面,选择好地址后,进行下载
5.解压图标离线字体资源包
找到download.zip压缩包,解压该压缩包后,如下
6.在项目中引入图标离线字体资源
在项目assets文件夹下创建iconfont文件夹,将下载后的离线图标字体资源复制至改文件夹下
7.在项目中使用图标离线字体资源
A.删除项目main.less文件中原iconfont引入代码
B.在项目main.vue文件中直接引用iconfont文件夹下iconfont.css样式文件
C.打开iconfont文件夹下demo_index.html文件,如下:
如果想在界面中使用这个图标“notice”
D.在demo_index.html中找到该图标,复制“”
在对应代码块将图标字体替换为“”
E.按照上述步骤将其他图标进行替换即可;
经测试,网络离线状态下也可以正常使用该图标;