Vue添加第三方iconfont圖標庫

Vue添加第三方iconfont圖標庫

一、圖標包製作

我們需要到iconfont選擇圖標，然後下載到本地。

iconfont官網：http://www.iconfont.cn/

下面以導入官方提供的【AIS產品圖標庫】爲例

1.登錄到iconfont

2.選擇圖標庫

在導航欄點擊【圖標庫】然後選擇【官方圖標庫】

這時候我們會看到官方圖標庫，我們找到【AIS產品圖標庫】，點擊進入

3.添加圖標到自己的庫

添加入庫

進入【AIS產品圖標庫】後，我們可以選擇自己喜歡的圖標，然後添加到自己的庫，具體操作，鼠標放到圖標上，會出現選項，選擇【添加入庫】

全部添加到庫

打開開發者工具，在控制檯輸入：

document.querySelectorAll('.icon-gouwuche1').forEach(function(item){item.click()})

添加至項目

點擊右上角【購物車】選擇【添加至項目】，然後創建項目，輸入項目名即可。

4.下載圖標到本地

修改前綴

點擊導航欄【圖標管理】，然後選擇我們剛剛創建的項目。在【更多操作】裏選擇【修改項目】

然後我們就可以修改【FontClass/Symbol前綴】了，這裏我們修改前綴爲【ais】

然後點擊【下載至本地】即可。

二、vue裏使用iconfont

1. 準備

創建vue項目

在代碼存放目錄下，創建名爲vue_iconfont的項目

vue init webpack vue_iconfont

複製圖標到項目

在vue_iconfont\src\assets目錄下創建iconfont目錄，然後將下載的圖標解壓，複製到此位置。

修改iconfont.css

想要圖標正常顯示，我們需要修改iconfont.css,在大約17行插入如下代碼，ais之前修改的前綴名，注意第二個ais前面有一個空格。

[class^="ais"], [class*=" ais"] {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

2.引入css

在vue項目的main.js裏引入css

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

3.使用

使用iconfont圖標很簡單，class=“ ”，在標籤圖標的class屬性指定iconfont圖標即可

<template>
  <div>
    <span>
      <i class="ais-bangzhu"></i>
      <i class="ais-baocun"></i>
      <i class="ais-app"></i>
      <i class="ais-caidan"></i>
      <i class="ais-chakan"></i>
      <i class="ais-daxiao"></i>
    </span>
  </div>
</template>