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

時間 2019-12-04

標籤 vue 項目本地使用 iconfont 字體圖標三種方式简体版

原文原文鏈接

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

開始使用：html

點擊下載到本地
在了路徑 src/assets 下新建文件夾 iconfont ，用來存放字體圖標的本地文件
解壓下載到本地的字體圖標文件，放到 iconfont 文件夾下
如過項目中沒有下載 css-loader 依賴包，就進行下載，不然會報錯web
```
npm install css-loader -D
```

而後引入樣式並使用便可。npm

<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"></use>
       </svg> Symbol
     </p>
   </div>
 </template>
    
 <script>
 import "../assets/iconfont/iconfont.css";
 import "../assets/iconfont/iconfont.js";
 export default {
   data() {
     return {};
   }
 };
 </script>
 
 <style scoped>
 * {
       font-size: 24px;
     }
     @font-face {
       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>

效果以下：
segmentfault