在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 依賴包，就進(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ú)寫，然后引入 */
@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)文章
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問(wèn)題2017-06-06
但隨著vue3版本的到來(lái)，對(duì)typescript的支持度越來(lái)越高，tsx語(yǔ)法也被大部分人越來(lái)越接收，所以很多項(xiàng)目都是搭配 Vue3 + TS 進(jìn)行的，這篇文章主要介紹了一文掌握在Vue3中書(shū)寫TSX的方法,需要的朋友可以參考下2023-05-05
卸載vue2.0并升級(jí)vue_cli3.0的實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于卸載vue2.0并升級(jí)vue_cli3.0的實(shí)例內(nèi)容，需要的朋友們可以學(xué)習(xí)參考下。2020-02-02
handsontable是目前在前端界最接近excel的插件，可以執(zhí)行編輯，復(fù)制粘貼，插入刪除行列，排序等復(fù)雜操作，這篇文章主要介紹了hansontable在vue中的基本使用,需要的朋友可以參考下2022-10-10
Vue.set()動(dòng)態(tài)的新增與修改數(shù)據(jù),觸發(fā)視圖更新的方法
今天小編就為大家分享一篇Vue.set()動(dòng)態(tài)的新增與修改數(shù)據(jù),觸發(fā)視圖更新的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
詳解如何創(chuàng)建基于vite的vue項(xiàng)目
vite 這個(gè)是尤大開(kāi)發(fā)的新工具,目的是以后替代webpack,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建基于vite的vue項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了Vue布置導(dǎo)航守衛(wèi)獲取用戶信息，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了教你搭建按需加載的Vue組件庫(kù)(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了vue2項(xiàng)目之swiper.js 的使用,需要的朋友可以參考下2023-12-12
基于vue和react的spa進(jìn)行按需加載的實(shí)現(xiàn)方法
這篇文章主要介紹了基于vue和react的spa進(jìn)行按需加載,需要的朋友可以參考下2018-09-09