添加icon font圖標

我們都知道，element提供的參考圖標是有限的，有時候項目用到的很多都是element不存在的圖標，這個時候，可以使用icon font中的圖標

登錄icon font官網

官網地址爲：https://www.iconfont.cn/

搜索自己想要的圖標

加入到購物車

添加到項目

點擊購物車

選擇添加至項目

下載到本地

點擊下載到本地

在項目中引入

1. 解壓後，把整個文件夾拷貝到項目的style文件下，這裏我把文件夾重命名爲iconfont
   
2. 在main文件中引入樣式文件

// 引入iconfont樣式
import './style/iconfont/iconfont.css'

使用

從iconfont.css文件中，可以看到引入到class名

在使用的時候，記得在前面加上iconfont,使用的代碼如下：

<template>
    <div>
        <el-button type="primary">
            <i class="iconfont icon-daoru" style="margin-right: 6px"/>
            導入
        </el-button>
        <el-button type="primary">
            <i class="iconfont icon-daochu" style="margin-right: 6px"/>
            導出
        </el-button>
    </div>
</template>

<script>
  export default {
    name: 'Iconfont'
  }
</script>

<style scoped>

</style>

最終效果如下：

小結

1. 下載
2. 引入:import './style/iconfont/iconfont.css'
3. 使用:<i class="iconfont icon-daochu" style="margin-right: 6px"/>