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

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

開始使用：

1. 點擊下載到本地

2. 在了路徑 src/assets 下新建文件夾 iconfont ，用來存放字體圖標的本地文件
3. 解壓下載到本地的字體圖標文件，放到 iconfont 文件夾下

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

   npm install css-loader -D

5. 然後在 main.js 中全局引入樣式並使用即可。

   <template>
     <div>
       <p><i class="iconfont">&#xe633;</i> Unicode </p>
       <p><i class="iconfont icon-fanhuidingbu"></i> Font class </p>
       <p><svg class="icon" aria-hidden="true">
           <use xlink:href="#icon-fanhuidingbu"></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>