1 登录iconfont

网址：https://www.iconfont.cn/

2 配置自己的项目

FontClass/Symbol前缀：这里的内容就是在自己项目中引用具体icon名称时添加的前缀。icon名称定义见下。 Font Faimily：不用修改

3 搜索并添加

4 编辑图标名称

进入我的项目（资源管理-我的项目），选择具体项目，选择具体图标

Font Class/Symbol: 图标名称，与前面定义的FontClass/Symbol前缀共同构成icon使用名称 如：gea-avatar-c-f unicode：唯一标识，font文件内部的名称，在iconfount.css文件中自定义的icon名称（如gea-avatar-c-f与其构成键值对。 命名建议 同名图标一般分圆形/非圆形、填充/线条 -c 表示圆形 -f 表示填充

5 下载项目图标集文件

解包zip文件内容及使用说明

demo.css demo_index.html iconfont.css – 必要。非覆盖式，部分更新 iconfont.eot – 必要。覆盖更新 iconfont.js iconfont.json – 必要。覆盖更新 iconfont.svg – 必要。覆盖更新 iconfont.ttf – 必要。覆盖更新 iconfont.woff – 必要。覆盖更新

6 更新引用图标的项目文件

在项目的 src->assets->icon文件下，存放上面的必要文件。 在iconfont.css文件中如下代码为固定部分，该样式文件定义了icon的使用样式，可根据自己需要修改：

.gea – 基本样式，默认为小图标 .gea-lg .gea-md – 图标大小 .gea-danger .gea-warn – 图标颜色 .gea-* – 具体使用的图标名称 /* 引入图标 此处为前面项目管理中定义的Font前缀 */

@font-face {
          
   
  font-family: "iconfont"; /* Project id 3251981 */
  src: url(iconfont.eot?t=1647431682424); /* IE9 */
  src: url(iconfont.eot?t=1647431682424#iefix) format(embedded-opentype), /* IE6-IE8 */
       url(iconfont.woff?t=1647431682424) format(woff),
       url(iconfont.ttf?t=1647431682424) format(truetype),
       url(iconfont.svg?t=1647431682424#iconfont) format(svg);
}
/* 引入图标 */
[class^="gea-"],
[class*=" gea-"]
{
          
   
    font-family: "iconfont" !important;
    font-size: 16px ;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 5px;
}
 
.gea-lg {
          
   
  font-size: 48px!important;
}
.gea-md {
          
   
  font-size: 24px!important;
}
.gea-danger{
          
   
    color:red!important;
}
.gea-warn{
          
   
    color:greenyellow!important;
}
.gea-inf{
          
   
    color:darkslateblue!important;
}
<!--- 以下部分为定义的图标 content 就是iconFont中的该图标的unicode  --->
.gea-avatar-c-f:before {
          
   
  content: "e604";
}

每次重新下载项目时，需更新图标定一部分

7 使用

例如vue项目中：在main.js里把css引进来，全局引入

import "./assets/icon/iconfont.css"

使用

<i class="gea gea-avatar-c-f gea-warn gea-lg "></i>

8 图标名称查询

在iconfont网站中打开需要查询的项目，图标标注文字最下行即为图标名称