iconfont 的使用

准备工作

阿里巴巴矢量图标库

• 创建一个项目
• 选择平台上心仪的图标或者上传自己制作的图标添加入购物车
• 点击购物车，将购物车的图标添加到创建的项目
• 点击下载到本地

vue + element 中font class 方式的使用

---

iconfont 项目中图标如下

• 第一步：拷贝文件

拷贝下载项目中除demo前缀的所有文件 到项目中assets/iconfont文件夹下

@font-face {
  font-family: "iconfont"; /* Project id 3134317 */
  src: url('iconfont.eot?t=1641969760190'); /* IE9 */
  src: url('iconfont.eot?t=1641969760190#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1641969760190') format('woff2'),
       url('iconfont.woff?t=1641969760190') format('woff'),
       url('iconfont.ttf?t=1641969760190') format('truetype'),
       url('iconfont.svg?t=1641969760190#iconfont') format('svg');
}

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

.el-icon-start:before {
  content: "\e65d";
}

.el-icon-tag:before {
  content: "\e601";
}

或
只拷贝iconfont.css 文件，将文件中的@font-face替换成在线链接生成的代码

@font-face {
  font-family: 'iconfont';  /* Project id 3134317 */
  src: url('//at.alicdn.com/t/font_3134317_l3uar3otr4a.eot?t=1641969766909'); /* IE9 */
  src: url('//at.alicdn.com/t/font_3134317_l3uar3otr4a.eot?t=1641969766909#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_3134317_l3uar3otr4a.woff2?t=1641969766909') format('woff2'),
  url('//at.alicdn.com/t/font_3134317_l3uar3otr4a.woff?t=1641969766909') format('woff'),
  url('//at.alicdn.com/t/font_3134317_l3uar3otr4a.ttf?t=1641969766909') format('truetype'),
  url('//at.alicdn.com/t/font_3134317_l3uar3otr4a.svg?t=1641969766909#iconfont') format('svg');
}

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

.el-icon-start:before {
  content: "\e65d";
}

.el-icon-tag:before {
  content: "\e601";
}

• 第二步：引入文件

在main.js中引入iconfont.css

import '@/assets/iconfont/iconfont.css'

• 第三步：使用

 <el-tabs>
    <el-tab-pane>
         <span slot="label" style="line-height: 54px;">
           <i class="iconfont el-icon-tag"/>
           所有内容
         </span>
       </el-tab-pane>
       <el-tab-pane>
         <span slot="label" style="line-height: 54px;">
           <i class="iconfont el-icon-start"/>
           图片
         </span>
       </el-tab-pane>
       <el-tab-pane>
         <span slot="label" style="line-height: 54px;">
           <i class="el-icon-date"/>
           日期
         </span>
       </el-tab-pane>
  </el-tabs>

效果如下