vue項(xiàng)目中使用iconfont方式

更新時(shí)間：2024年07月27日 09:08:25 作者：不吃香菜的蟹老板

這篇文章主要介紹了vue項(xiàng)目中使用iconfont方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue項(xiàng)目中引入iconfont的方式

iconfont的三種使用方法

unicode 不常用
Font class 像字體一樣使用，默認(rèn)黑色圖標(biāo)，無法修改顏色
Symbol 支持多色圖標(biāo)，更靈活，推薦

一、unicode

略

二、Font class

方式一：下載到本地

第一步：iconfont-資源管理-我的項(xiàng)目-Font class -下載到本地

第二步：引入至項(xiàng)目中

在 index.html

<link rel="stylesheet" href="/src/assets/iconfont/iconfont.css" rel="external nofollow"  />

第三步：vue頁面中使用

<span class="iconfont icon-off-line"></span>

方式二：在線引用

iconfont-資源管理-我的項(xiàng)目-Font class - 查看在線鏈接 - 項(xiàng)目引用樣式文件 - 頁面中使用；

使用方式跟上面的方式一大體相同，只是在index.html中引入href 不一樣

<link rel="stylesheet"  rel="external nofollow"  />

??????

三、Symbol

3.1 下載到本地的方式

3.1.1 iconfont-我的項(xiàng)目-symbol-下載到本地 - 解壓提取出最低層文件夾（font_421XXXXX）-重命名文件夾為 iconfont（包含iconfont.js）放在vue項(xiàng)目中（我是放在/assets/ ）

3.1.2 在assets 目錄下建一個(gè)icon.css文件 /assets/css/icon.css

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

3.1.3 在main.js中引入js和css

import './assets/iconfont/iconfont.js'
import './assets/css/icon.css'

3.1.4 最后vue文件中使用圖標(biāo)

<svg class="icon outerColor" aria-hidden="true">
     <use xlink:href="#icon-xuanzhong" rel="external nofollow"  rel="external nofollow" ></use>
</svg>

3.2 在線引用的方式

3.2.1 、 iconfont-我的項(xiàng)目-symbol-查看在線鏈接-復(fù)制鏈接 //at.alicdn.com/t/c/font_4 ***** _famq0z6ltd.js
3.2.2 、第二步跟上面一樣，在assets 目錄下建一個(gè)icon.css文件
3.2.3、在mian.js中引入 icon.css文件，在index.html引入在線js資源文件并且加上前綴 https:

!!! 記住在線的引入不是在main.js中引入js文件了，因?yàn)闆]有本地iconfont目錄,而是在index.html中引入

// 在 main.js

import './assets/css/icon.css'

// 在public/index.html

<head>
    <script src="https://at.alicdn.com/t/c/font_4*****_famq0z6ltd.js"></script>
</head>

3.2.4 最后在頁面中使用圖標(biāo)是一樣的

<svg class="icon outerColor" aria-hidden="true">
     <use xlink:href="#icon-xuanzhong" rel="external nofollow"  rel="external nofollow" ></use>
</svg>

3.3 修改圖標(biāo)顏色