iconfont 使用总结

目录

业务背景：

解决办法：

1. 新建项目

1.1 进入我的项目页面

1.2 新建项目

2.  在线引入方式

2.1 添加购物车

2.2 添加到项目

2.3 下载至本地

2.4 解压缩

2.5 复制到项目

3. 全局引入 iconfont.css样式文件

 4. 使用iconfont

4.1 font class方式

---

业务背景：

当项目足够复杂时，本地管理icons资源的劣势变得愈加明显，首先是占用项目空间，其次以组件形式引入单个svg文件挺麻烦，其次使用iconfont的icon还需要创建一个文件，将svg内容复制粘贴到本地。以上方面展示了本地管理icons资源的空间和时间维护成本。因此我们希望在iconfont新建一个项目，托管我们使用到的所有外部icons。

解决办法：

1. 新建项目

1.1 进入我的项目页面

进入iconfont官网，

icon官网选择“资源管理”标签，点击“我的项目”

进入到“我的项目”视图

1.2 新建项目

如何新建项目的说明

2.  在线引入方式

2.1 添加购物车

找到满意的图标，鼠标聚标可以看到图标上出现购物车按钮，点击此按钮可以选择将该图表添加到购物车

如何添加心仪图标到购物车

 

2.2 添加到项目

添加到购物车成功后，会看到顶部栏的购物车上面出现红色的数字1，点击顶部栏的购物车

如何从购物车添加图标到项目

2.3 下载至本地

添加到项目之后，进入到项目页面，选择font class引入方式，点击下载至本地

下载iconfont资源到本地

2.4 解压缩

会看到以下文件目录: 

下载到本地的文件目录结构

2.5 复制到项目

将这些文件复制到项目icons目录，存放目录可以参考${relative_path_to_your_project}/static/icons

3. 全局引入 iconfont.css样式文件

在vue项目的main.js或App.vue文件引入，代码示例如下：

import '../static/icons/iconfont.css'

 4. 使用iconfont

注意：

使用方式和引入iconfont的方式要一致，前面介绍了font class引入的方式，因此仅仅介绍font class的使用方式

4.1 font class方式

    通过class使用图标,如：icon-daima；

<i class="iconfont icon-daima"></i>

注意：

引入时的icon-前缀是根据你创建项目时定义的前缀需要保持一致