在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)
更新時(shí)間：2022年09月08日 11:03:43 作者：艾歡歡
這篇文章主要介紹了在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)
這里有使用前的準(zhǔn)備和三種使用方式介紹，參考這里
還有 vue中手動(dòng)封裝iconfont組件（三種引用方式的封裝）
開(kāi)始使用
點(diǎn)擊下載到本地
在了路徑 src/assets 下新建文件夾 iconfont ，用來(lái)存放字體圖標(biāo)的本地文件
解壓下載到本地的字體圖標(biāo)文件，放到 iconfont 文件夾下
如過(guò)項(xiàng)目中沒(méi)有下載 css-loader 依賴(lài)包，就進(jìn)行下載，否則會(huì)報(bào)錯(cuò)
npm install css-loader -D
然后引入樣式并使用即可。
<template>
<div style="background-color:cadetblue;color:#333;padding:30px">
<p><i class="iconfont"></i> Unicode </p>
<p><i class="iconfont icon-fanhuidingbu"></i> Font class </p>
<p style="font-size:2em;">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fanhuidingbu" rel="external nofollow" ></use>
</svg> Symbol </p>
</div>
</template>
<script>
// Font class
import "../assets/iconfont/iconfont.css";、
// Symbol
import "../assets/iconfont/iconfont.js";
export default {
data() {
return {};
}
};
</script>
<style scoped>
* {
font-size: 24px;
}
/* 下面的樣式可以單獨(dú)寫(xiě)，然后引入 */
@font-face { /* Unicode */
font-family: "iconfont";
src: url("../assets/iconfont/iconfont.eot");
src: url("../assets/iconfont/iconfont.eot?#iefix") format("embedded-opentype"),
url("../assets/iconfont/iconfont.woff2") format("woff2"),
url("../assets/iconfont/iconfont.woff") format("woff"),
url("../assets/iconfont/iconfont.ttf") format("truetype"),
url("../assets/iconfont/iconfont.svg#iconfont") format("svg");
}
.iconfont {
font-family: "iconfont" !important;
font-size: 1em;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon {
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>效果如下：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中根據(jù)時(shí)間戳判斷對(duì)應(yīng)的時(shí)間(今天 昨天 前天)
這篇文章主要介紹了vue中 根據(jù)時(shí)間戳 判斷對(duì)應(yīng)的時(shí)間（今天 昨天 前天）,需要的朋友可以參考下2019-12-12
VuePress 靜態(tài)網(wǎng)站生成方法步驟
這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
中秋節(jié)快要到啦,我們一起用Vue創(chuàng)建一個(gè)簡(jiǎn)單的連連看游戲,連連看大家一定都玩過(guò)吧,通過(guò)消除相同的圖案來(lái)清理棋盤(pán),小編將一步步引導(dǎo)大家完成整個(gè)游戲的制作過(guò)程,讓我們開(kāi)始吧,一起為中秋節(jié)增添一些互動(dòng)和娛樂(lè)2023-09-09
vue 中基于html5 drag drap的拖放效果案例分析
本文通過(guò)三個(gè)案例給大家介紹了vue 中基于html5 drag drap的拖放效果 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了uni-app 的模板語(yǔ)法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
代替Vue?Cli的全新腳手架工具create?vue示例解析
這篇文章主要為大家介紹了代替Vue?Cli的全新腳手架工具create?vue示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
解決vue下載后臺(tái)傳過(guò)來(lái)的亂碼流的問(wèn)題
這篇文章主要介紹了解決vue下載后臺(tái)傳過(guò)來(lái)的亂碼流的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
vue腳手架搭建/idea執(zhí)行vue項(xiàng)目全過(guò)程
新建目錄并運(yùn)行命令提示符,通過(guò)npm安裝Vue腳手架并查看版本號(hào),接著,使用vue create命令創(chuàng)建Vue項(xiàng)目,選擇所需配置后完成項(xiàng)目創(chuàng)建,創(chuàng)建成功可見(jiàn)Vue文件夾,使用IDEA打開(kāi)項(xiàng)目,并啟動(dòng)項(xiàng)目,根據(jù)需求修改初始化界面2024-10-10
本篇文章主要介紹了淺談Vue 初始化性能優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作
這篇文章主要介紹了vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08