在vue项目中(本地)使用iconfont字体图标的三种方式

使用前的准备和三种使用方式介绍，参考这里

开始使用：

1. 点击下载到本地

   

2. 在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件
3. 解压下载到本地的字体图标文件，放到 iconfont 文件夹下

4. 如过项目中没有下载 css-loader 依赖包，就进行下载，否则会报错

   npm install css-loader -D

5. 然后引入样式并使用即可。

    <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>

效果如下：