前端矢量图标库引用操作

 矢量图标库操作

 1、访问站点：https://www.iconfont.cn/，登录，搜索所需要图标

下面以“测试”图标为例，如下，添加入库。

 

 进入图标库，将选中的图标加入项目中。

将项目下载至本地，

 

2、解压下载的包，目录结构如下。

 

打开demo_index.html文件

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

 

了解到使用步骤，

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon--xxx"></span>

 

3、使用demo

创建ceshi.html文件，并将css文件拷贝到该目录。

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

 

访问如下，

 

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