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

 阅读约 5 分钟

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

开始使用:

  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>

效果如下:
在这里插入图片描述

阅读 948更新于 2019-05-07

推荐阅读
漫漫前端路
用户专栏

热爱前端,学习、交流和分享前端技术,总结项目中出现的问题。前端攻城狮的升级之路。

6 人关注
25 篇文章
专栏主页
目录