使用element.ui库的Icon 图标，只要修改颜色，就可以实现图标自由。近期接手的一个H5小项目，UI设计师给了大量的图标切图，不胜其烦。决定自己定义一套图标，用于实际的项目开发。

一：准备

1、打开 iconfont-阿里巴巴矢量图标库网站，先搜索一下自己要的图标。

悬停到你想要的图标上，点击第一个图标（购物车【添加入库】），已经添加的图标在右上角的购物车里可查看。

2、点击右上角的购物车，打开一个弹框。

点击添加至项目按钮(图2-1)，打开项目清单。

首次使用如图2-2所示，点击右上角 + 按钮后，结果如图2-3所示。
编辑项目名称，点击确定按钮后(图2-4)，跳转至我的项目页面(2-5)。
有存在的项目，如图2-6所示，点选项目，点击确定按钮后，跳转至我的项目页面(2-5)。

注意：如首次使用未编辑项目名称，或未点选已存在的项目，直接点击确定按钮，都会生成 no name 的项目。可在资源管理 / 我的项目下，管理已有项目。

3、资源管理 / 我的项目 / xx 页面，点击下载至本地按钮，浏览器自动下载一个 download.zip 文件。

解压后，打开 demo_index.html，里面清晰明了介绍了三种推荐的使用方式。

在实际项目中我选用了 font-class 引用 的方式。

二：项目使用

1、把iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2 四个关键文件引入项目。

2、修改 iconfont.css，符合实际项目的命名。

@font-face {
  font-family: "iconfont";
  src: url('iconfont.woff2?t=1676701880180') format('woff2'),
       url('iconfont.woff?t=1676701880180') format('woff'),
       url('iconfont.ttf?t=1676701880180') format('truetype');
}

/* 修改一：定义 icon 的通用样式 */
/* .iconfont { */
[class*="cc-icon-"] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 修改二：可重新定义所有class */
.cc-icon-warn:before {
  content: "\e848";
}

.cc-icon-editor:before {
  content: "\e6f5";
}

3、引入 iconfont.css

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

// 或 main.js引入 方式
require('./iconfont.css');
或：import './iconfont.css';

4、挑选相应类名，应用于页面。这些Icon图标即可当字体使用，可修改font-size，color等。

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

最后，每次更新了图标，重新下载 download.zip 文件，并更新四个文件即可。

The end.

H5+CSS：Vue项目引入图标字体

一：准备

二：项目使用

猜你喜欢