阿里symbol图标:引入+使用方法

来源:互联网 发布:微信淘宝客机器人软件 编辑:程序博客网 时间:2024/05/21 21:02

前言:

记录阿里symbol图标的引入+使用方法

第一步:

进入阿里图标库Iconfont:http://www.iconfont.cn/,并登录

第二步:

选择需要的图标后加入购物车,并在购物车里将图标添加至项目

第三步:

获取项目下面生成的symbol代码或将项目下载至本地,并引入到html文件

第四步:

加入通用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>

注:svg里的use标签引用你所需要的symbol图标的名字即可