欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)

 更新時(shí)間：2022年09月08日 11:03:43   作者：艾歡歡  
這篇文章主要介紹了在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)

這里有使用前的準(zhǔn)備和三種使用方式介紹，參考這里

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

開始使用

點(diǎn)擊下載到本地

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

解壓下載到本地的字體圖標(biāo)文件，放到 iconfont 文件夾下

如過項(xiàng)目中沒有下載 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">&#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;
}
/* 下面的樣式可以單獨(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)文章

最新評論