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

 

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

1. 进入官方图标库

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

 

 

1. 选择所需图标

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

 

 

1. 保存所选图标

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

 

 

 

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.按照上述步骤将其他图标进行替换即可；

9.在标签中的使用

具体步骤同上，挑选相应图标并获取类名，应用于页面；在标签的classs属性中输入：“iconfont .icon-search”;

 

 

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