前端矢量图标库引用操作

 矢量图标库操作

 1、访问站点&＃xff1a;https://www.iconfont.cn/&＃xff0c;登录&＃xff0c;搜索所需要图标

下面以“测试”图标为例&＃xff0c;如下&＃xff0c;添加入库。

 

 进入图标库&＃xff0c;将选中的图标加入项目中。

将项目下载至本地&＃xff0c;

 

2、解压下载的包&＃xff0c;目录结构如下。

 

打开demo_index.html文件

如下截图&＃xff0c;点击“”看完整个文档&＃xff0c;掌握引用方式

 

了解到使用步骤&＃xff0c;

第一步&＃xff1a;引入项目下面生成的 fontclass 代码&＃xff1a;

第二步&＃xff1a;挑选相应图标并获取类名&＃xff0c;应用于页面&＃xff1a;

 

3、使用demo

创建ceshi.html文件&＃xff0c;并将css文件拷贝到该目录。

如下目录结构和配置文件。

 

访问如下&＃xff0c;

 

配置完成&＃xff0c;实现了将矢量图标icon按键拷贝到本地使用。