zoukankan      html  css  js  c++  java
  • vue 项目中添加阿里巴巴矢量图

    1. 选择需要的图标,添加到购物车

    2. 打开购物车,添加至我的项目

    3. 打开项目列表 - 更多操作 - 编辑项目

    修改FontClass/Symbol前缀,自定义一个名称,例如:v-icon-custom
    

    4. 点击下载至本地,解压文件后

    将里面各个文件(除去demo_index.html和demo.css)复制到 src/assets/icons 下:

    image

    5. 打开 iconfont.css, 作如下修改

    @font-face {font-family: "iconfont";
      src: url('iconfont.eot?t=1552123170809'); /* IE9 */
      src: url('iconfont.eot?t=1552123170809#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL8AAsAAAAABwwAAAKtAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFhATYCJAMMCwgABCAFhG0HQBsxBsgekiQlCogQgo4rCEGY4uFrDX1/d+8CAApQZSIBxxMU0ZhOFZB0pDs+QhV1XeB/1/QPAFVe1TDXVlaNSLWsDpMDatOM2aJQBL5Cb3Ju81g3gD5x77TpC8d+luU2x8DuUxfFcUCB7oFRERVIQN4wdtVSeUj3CTQbN6Boe2IuDpUKvCwQL01dhspCUlHMSqNQN+wt4rNKY3qTfgCf1Pfjn3BUklQZXrvzeFyDoZ+JXz1567qbgkS1nB/mITIWgELcbiyeKBEmu0SzsbS7sVaEtFTm+hqlDMz1Qf94iajh9lYwAw3poVRMRvCrRwE5yItrNGEbOAL0Xn+lYEbOrXXtd5qg8Sa6+Umd1qN4IplMrTad3m3dVne+vd9+yNRl1Nb+ptrFxPnW+JlrK8rWm043PwCDXVjnk2/8J/O98Fp4GbRmxmbGofz1utBEA7RJOC/foRKONl421j54fT3uPubzrroDdUp91whIcG9+lc7B9ddMzOt/+jduXwRPxIbl/40tBZzfXQdU/PprMSwMGu8jFPxX1cCBEmiwKxdPyZRRJVtUdtcOzUHENRzt9jXd3Dc4T2gsqEwkDcaQNZogF/oCKi2WUGu0hmbzJg+36MGUiNKEOfsAodMLknZfkHV6Ixf6Jyr9/lHrjBI0O4qeM1tMhVm9xYjMiYaUZWSqvkeph1fHnVGizzsyy2uUMElY3sygEA6WK5PEI2yJDfkFPcw5RZT5LpoAjxHH8VGW+RZROTY4z0YEgTa9CKu+C9W2MISMIzSIYhliUvk8VIznqiufjyJ08xwy1kHoyycRTJ45PRKCBQeQJ43eIMKjPJO3QBfGcRRCMT4XMgH8hEOKPiTbPMtCqDjMmJDPihDQMDrUiLc3u/93AprhvTlS5CjqB7KpyV6dtK0YrGDLJgAAAAA=') format('woff2'),
      url('iconfont.woff?t=1552123170809') format('woff'),
      url('iconfont.ttf?t=1552123170809') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('iconfont.svg?t=1552123170809#iconfont') format('svg'); /* iOS 4.1- */
    }
    
    [class^="v-icon-custom"], [class*=" v-icon-custom"] {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .el-icon-newfont-menu:before {
      content: "e655";
    }
    
    .el-icon-newfont-nav:before {
      content: "e728";
    }
    
    

    6. 在main.js 中引入 iconfont.css

    import '@/assets/icons/iconfont.css'
    

    7. 页面中使用以上图标

     <span class="el-icon-newfont-menu"></span>
    
  • 相关阅读:
    C#操作ini配置文件和写入日志操作
    asp.net AJAX 定期刷新页面,然后,在 Timer 的事件中弹出窗口
    setInterval和setTimeout的区别
    检测远程URL是否存在
    SharePoint列表的模板类型中的BaseType参数和ListTemplate参数
    TCP中的Flag options
    jQuery基础教程摘录 Hello world
    SharePoint站点无法打开的问题
    SPQuery在引用field的时候要用internal name
    Windows Server 2008中用管理员的权限使用命令行来打开程序
  • 原文地址:https://www.cnblogs.com/cckui/p/10502421.html
Copyright © 2011-2022 走看看