iconfont三种使用方式详解及避坑

iconfont共有三种使用方式，每种要引入的文件、使用方式不一样

一、Unicode //很少用

1. 引入文件

   • iconfont.ttf
   • iconfont.woff
   • iconfont.woff2

2. css文件配置

@font-face {
  font-family: "iconfont logo";
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3. html里使用

<span class="iconfont">&#x33;</span>

二、Font class //最常见【字体图标】

以vue这种项目为例

1. 引入文件 放在项目/assets/iconfont里
   • iconfont.css // 这个css里引入了下面三个文件
   • iconfont.ttf
   • iconfont.woff
   • iconfont.woff2

通过类名来设置图标，而且hover换颜色也方便
main.js里引入iconfont相关文件

import "@/assets/iconfont/iconfont.css";

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

.iconfont:hover{
    color:#ff0000;
}

三、Symbol //就是svg集合

补充说明

使用注意：想要变色，在导出字体前要先批量去色，让导出的svg的fill为空

• 浏览器渲染 SVG 的性能一般，还不如 png
• 支持像字体那样，通过 font-size, color 来调整样式

使用流程

1. 引入文件【vue在main.js里引入】
   • iconfont.js
2. 加入通用 CSS 代码（引入一次就行）

      .icon {
        width: 20px;
        height: 20px;
        vertical-align: -0.15em;
        fill: #333333;
        overflow: hidden;
      }
      // 可以通过这仨属性改颜色和大小
      // 字体图标是改 color 和 font-size
      .icon:hover{
        fill: #990000;
        width:30px;
        height:30px;
      }
   

3. 挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

注：选图标下载流程

1. 搜索图标，添加到购物车
2. 购物车里选择添加至项目
3. 资源管理/我的项目，选择后下载

element-plus里的

currentColor是一个变量，这个变量的值是当前元素的color值。 svg里的path有fill="currentColor"，因此使用时，css设置color即可，不需要设置fill

• 直接用svg图标，要css设置 color 和 width/height

<Edit style="width: 1em; height: 1em;" />

• el-icon包一层,可以css设置 font-size 和 color

<el-icon class="edit-icon"> <Edit /> </el-icon>