vue文件使用iconfont解析
更新時間：2022年04月26日 11:32:17 作者：一條大河全靠浪
這篇文章主要介紹了vue文件使用iconfont解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue使用iconfont
1、導入字體文件到assets中
2、main.js 導入
import '@/assets/icon/iconfont.css';
3、使用
注意前面一定要加iconfont，否則是個空框框
<div class="iconfont icon-label"></div>
項目中正確使用iconfont
1、打開 iconFont官網 選擇自己喜歡的圖標，并且添加購物車
2、點擊購物車，添加至項目
3、下載至本地
4、把我們下載好的文件iconfont.css和iconfont.ttf放到項目assets文件夾下（可創(chuàng)建一個css文件或iconfont文件）
5、在main.js中引入iconfont.css樣式
import './assets/iconfont/iconfont.css'
6、在在vue文件中引用
<i class="iconfont icon-zitigui-xianxing"></i>
7、假如報錯，需要下載css-loader依賴包
npm install css-loader --save
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue項目中vue-i18n和element-ui國際化開發(fā)實現(xiàn)過程
這篇文章主要介紹了vue項目中vue-i18n和element-ui國際化開發(fā)實現(xiàn)過程，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
websocket通信是很好玩的,也很有用的的通信方式,下面這篇文章主要給大家介紹了關于Vue中前后端使用WebSocket的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據
這篇文章主要介紹了Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據2022-08-08
vue?cli2?和?cli3去掉eslint檢查器報錯的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3中reactive數(shù)據被重新賦值后無法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據被重新賦值后無法雙向綁定的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Tailwind是由Adam Wathan領導的TailwindLabs開發(fā)的 CSS 框架，這篇文章主要介紹了vue3?tailwindcss的使用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue登錄以及權限驗證相關的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue 組件（component）教程之實現(xiàn)精美的日歷方法示例
組件是我們學習vue必須會的一部分，下面這篇文章主要給大家介紹了關于Vue 組件（component）教程之實現(xiàn)精美的日歷的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
這篇文章主要為大家詳細介紹了基于Vue3.0實現(xiàn)無限級菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue父子組件傳值以及父調子方法、子調父方法，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07