在vue項目中(本地)使用iconfont字體圖標的三種方式總結

更新時間：2022年09月08日 11:03:43 作者：艾歡歡

這篇文章主要介紹了在vue項目中(本地)使用iconfont字體圖標的三種方式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue項目中(本地)使用iconfont字體圖標

這里有使用前的準備和三種使用方式介紹，參考這里

還有 vue中手動封裝iconfont組件（三種引用方式的封裝）

開始使用

點擊下載到本地

在了路徑 src/assets 下新建文件夾 iconfont ，用來存放字體圖標的本地文件

解壓下載到本地的字體圖標文件，放到 iconfont 文件夾下

如過項目中沒有下載 css-loader 依賴包，就進行下載，否則會報錯

npm install css-loader -D

然后引入樣式并使用即可。

<template>
  <div style="background-color:cadetblue;color:#333;padding:30px">
    <p><i class="iconfont">&#xe633;</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;
}
/* 下面的樣式可以單獨寫，然后引入 */
@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>

效果如下：

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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