首页 > 技术文章 > 前端矢量图标库引用操作

sunnyyangwang 2019-02-21 16:24 原文

 矢量图标库操作

 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按键拷贝到本地使用。

推荐阅读