iview中使用iconfont离线图标字体资源

时间:2024-04-12 12:48:33

 

最近项目中要使用离线图标字体,项目是基于iview+typescript的。现将怎么使用离线图标字体进行如下说明:

  1. 进入官方图标库

打开图标网站https://www.iconfont.cn/,进入官方图标库

iview中使用iconfont离线图标字体资源

 

 

  1. 选择所需图标

选择需要的图标,支持不同的图标库多选

iview中使用iconfont离线图标字体资源

 

 

  1. 保存所选图标

点击购物车,进入本次所选所有的图标

iview中使用iconfont离线图标字体资源

 

 

 

4.下载图标离线字体资源包

 

对当前所选择的素材进行下载,有“下载素材”、“下载代码”、“添加至项目”3种

iview中使用iconfont离线图标字体资源

 

下载素材是将图标以“SVG、AI、PNG”后缀的资源进行下载

 

iview中使用iconfont离线图标字体资源

下载代码是将当前所选图标的资源进行打包下载

iview中使用iconfont离线图标字体资源

 

添加至项目是先把多个图标保存至“我发起的项目”新建的图标项目,对图标项目资源打包下载,也可以点击所需的单个进行下载

我是将所有素材建个“顶天项目”进行保存,从“图标管理”进入我发起的项目,点击“下载至本地”,弹出下载地址选择页面,选择好地址后,进行下载

iview中使用iconfont离线图标字体资源

iview中使用iconfont离线图标字体资源

 

 

5.解压图标离线字体资源包

找到download.zip压缩包,解压该压缩包后,如下

 

iview中使用iconfont离线图标字体资源

6.在项目中引入图标离线字体资源

在项目assets文件夹下创建iconfont文件夹,将下载后的离线图标字体资源复制至改文件夹下

iview中使用iconfont离线图标字体资源

 

7.在项目中使用图标离线字体资源

A.删除项目main.less文件中原iconfont引入代码

 

iview中使用iconfont离线图标字体资源

B.在项目main.vue文件中直接引用iconfont文件夹下iconfont.css样式文件

iview中使用iconfont离线图标字体资源

 

 

C.打开iconfont文件夹下demo_index.html文件,如下:

iview中使用iconfont离线图标字体资源

 

如果想在界面中使用这个图标“notice

iview中使用iconfont离线图标字体资源

iview中使用iconfont离线图标字体资源

 

D.在demo_index.html中找到该图标,复制“”

 

iview中使用iconfont离线图标字体资源

 

在对应代码块将图标字体替换为“”

 

iview中使用iconfont离线图标字体资源

E.按照上述步骤将其他图标进行替换即可;

 

经测试,网络离线状态下也可以正常使用该图标;

 

iview中使用iconfont离线图标字体资源