阿里图标及阿里多色图标的使用

阿里图标官网：http://www.iconfont.cn/

一，单色图标的使用

1，选择你需要的图标添加到购物车，

2，进入到购物车页面，选择添加到项目按钮

3，进入我的项目页面，下载至本地，解压出来把iconfont.css中修改@font-face中的代码为在线生成的Unicode，如果是小程序中使用注意改成WXss格式

4，在html中使用<text class='iconfont icon-shouye4'></text> 此text是小程序中的很累标签

<text class='f20 iconfont icon-shouye4'>我的患者</text>

f20是自定义的字体大小样式,iconfont 不变，变后边的

二，多色图标的使用

前三步同单色图标使用的前三步，

4，页面引入下载过来的iconfont.js

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

5，在css中加入样式：

.icon {

width: 1em; height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

6，在html中使用

<svg class="icon" aria-hidden="true">

        <use xlink:href="#icon-time"></use>

</svg>

其中 xlink:href="#icon-time"的icon-time就是该图标的class类名

获取类名如下图

目前多色图标不能在小程序中使用