zoukankan      html  css  js  c++  java
  • vue elementui 引入第三方icon iconfront

    elementui框架自带icon在开发大型前端应用时显得捉襟见肘。淘宝开源的iconfront的图标库上有很多优秀的icon图标。elementui支持整合iconfront到应用中,步骤如下:

    1. 首先需要在iconfront注册登陆,新建项目,然后把心仪的icon添加到项目中。

      )
    2. 接下来有两种做法,一种是在线链接,一种是下载解压后拷贝到本地的项目。
    • 在线链接方式如下
      新建一个iconfont.css文件,添加如下内容,el-icon-ali是第一步新建项目时给定的icon名前缀。
    [class^="el-icon-ali"], [class*="el-icon-ali"]
    {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    

    接下来将iconfront项目提供的在线链接添加到vue项目的index.html中

    <!DOCTYPE html>
    <html>
    <head>
        ...
        <link>
    </html rel="stylesheet" href="//at.alicdn.com/t/font_1100946_7gqmadkiso5.css
    ">
    

    在vue项目中的main.js中import刚才创建的iconfront.css

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import './assets/.../../iconfront.css'
    Vue.use(ElementUI)
    

    添加新icon时,只要更新index.html中的链接即可

    • 下载导入方式
      解压下载出所有文件,拷贝到vue适当目录中,找到iconfront.css文件,一样添加如下内容
    [class^="el-icon-ali"], [class*="el-icon-ali"]
    {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    

    接下来只要在vue项目中的main.js中import刚才创建的iconfront.css即可

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import './assets/.../../iconfront.css'
    Vue.use(ElementUI)
    
  • 相关阅读:
    PHP之简单实现MVC框架
    socket泄露的问题
    gdb 调试多线程
    MMAP和DIRECT IO区别
    三年回首:C基础
    定时器管理:nginx的红黑树和libevent的堆
    strsep和strtok_r替代strtok
    缓存穿透和缓存失效
    mmap为什么比read/write快(兼论buffercache和pagecache)
    B+Tree和MySQL索引分析
  • 原文地址:https://www.cnblogs.com/linyihai/p/10575668.html
Copyright © 2011-2022 走看看