vue element自定义图标-iconfont图标的使用

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网站中打开需要查询的项目，图标标注文字最下行即为图标名称