zoukankan      html  css  js  c++  java
  • 怎么在VUE中引入iconfont图标

    背景

    自己看着自己之前的方引入图标的方法.看着有些疑惑.

    于是,自己整理了下引入的流程.以免再次疑惑.如果你正好在网上查找如何在VUE中引入iconFont图标.那么这篇文章也许对你有用.

    • 本文章引入的环境是在使用vue-cli构建的项目下进行的.
    • 引入图标的格式是Symbol.
    • 图标是下载到本地之后进行引用的.

    流程

    1.把从图标库下载到本地的图标解压.并且在vue所在工程中的src文件路径下新建一个asstes的文件夹.把下载并解压的文件全都放置在此文件夹下.(解压的文件有些是示例文件.不对图标产生影响)

    2.在vue工程文件夹中的main.js中引入iconfont.js文件

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import '@/assets/iconfont.js'; // 这行代码
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    

    3.在index.html中写入样式

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title>vue</title>
      <style>
      /*在这里*/
        .icon {
           1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
      </style>
    </head>
    
    <body>
      <div id="app"></div>
      <!-- built files will be auto injected -->
    </body>
    
    </html>
    
    

    4.配置完毕.现在就可以在html代码中引入symbol图标.

    <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-clientservice" />
    </svg>
    




  • 相关阅读:
    element-UI树形table父子级全选
    VUE父组件调用子组件方法
    elementUI-radio(单选框)label数据类型问题
    微信小程序下载wod,exc,pdf,并显示进度条
    微信小程序js跳转到外部页面
    微信使用e-char图表采坑
    微信登录授权
    外部二维码进入小程序
    js将对象属性作为参数传递
    vscode 个人配置
  • 原文地址:https://www.cnblogs.com/gtscool/p/13556480.html
Copyright © 2011-2022 走看看