vue項目中使用iconfont方式
vue項目中引入iconfont的方式
iconfont的三種使用方法
- unicode 不常用
- Font class 像字體一樣使用,默認(rèn)黑色圖標(biāo),無法修改顏色
- Symbol 支持多色圖標(biāo),更靈活,推薦
一、unicode
- 略
二、Font class
方式一:下載到本地
- 第一步:iconfont-資源管理-我的項目-Font class -下載到本地
- 第二步:引入至項目中
在 index.html
<link rel="stylesheet" href="/src/assets/iconfont/iconfont.css" rel="external nofollow" />
- 第三步:vue頁面中使用
<span class="iconfont icon-off-line"></span>
方式二:在線引用
iconfont-資源管理-我的項目-Font class - 查看在線鏈接 - 項目引用樣式文件 - 頁面中使用;
使用方式跟上面的方式一大體相同,只是在index.html中引入href 不一樣
<link rel="stylesheet" rel="external nofollow" />
??????
三、Symbol
3.1 下載到本地的方式
- 3.1.1 iconfont-我的項目-symbol-下載到本地 - 解壓提取出最低層文件夾(font_421XXXXX)-重命名文件夾為 iconfont(包含iconfont.js)放在vue項目中(我是放在/assets/ )
- 3.1.2 在assets 目錄下建一個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-我的項目-symbol-查看在線鏈接-復(fù)制鏈接 //at.alicdn.com/t/c/font_4 ***** _famq0z6ltd.js
- 3.2.2 、 第二步跟上面一樣,在assets 目錄下建一個icon.css文件
- 3.2.3、 在mian.js中引入 icon.css文件,在index.html引入在線js資源文件并且加上前綴 https:
!!! 記住在線的引入不是在main.js中引入js文件了,因為沒有本地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)顏色
- 在線修改:選中圖標(biāo) 批量去色
- 本地修改:把js文件用正則表達(dá)式找出fill屬性,把fill屬性全干掉
- 最后,設(shè)置外層顏色
.outerColor{ color: red; }
個人認(rèn)為:
在線引入的方式比較適合項目開發(fā)測試階段,因為圖標(biāo)可能會有新增修改,使用在線引入的方式就不用每次UI小姐姐編輯了圖標(biāo)都要開發(fā)人員去下載;
本地下載引入的方式適合在運(yùn)行上線階段,避免線上引入不穩(wěn)定訪問不了圖標(biāo)。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3中的elementPlus全局組件中文轉(zhuǎn)換方式
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉(zhuǎn)換方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級版,提供了更多的表單控件和功能,同時還改進(jìn)了一些細(xì)節(jié)和樣式,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-04-04