IconFont 图标

  • 06商品
    #icon-shangpin
  • 25单据
    #icon-danju
  • 28体积、空间
    #icon-tijikongjian
  • 225默认头像
    #icon-morentouxiang
  • 406报表
    #icon-baobiao
  • lock_fill
    #icon-lock_fill
  • symbol引用


    这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:

    使用步骤如下:

    第一步:引入项目下面生成的symbol代码:

    <script src="./iconfont.js"></script>

    第二步:加入通用css代码(引入一次就行):

    <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    </style>

    第三步:挑选相应图标并获取类名,应用于页面:

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