阿里图标库彩色图标使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/littlebearGreat/article/details/82782956

阿里图标库里的字体图标用着很爽，但是如果按照一般单色图标的使用方法来使用彩色图标时，彩色图标会变成单色的，在此，介绍如何使用彩色图标（svg）。

1.下载图标代码

2.在页面引入iconfont.js

3.写入图标代码：

<svg class="menuIcon alSvgIcon" aria-hidden="true">
    <use xlink:href="#linux"></use>
</svg>

注： #linux： linux是font class，在这里要用#加class名

4.写入svg图标通用样式

.alSvgIcon {
    width: 1em; 
    height: 1em;
    fill: currentColor;
    overflow: hidden;
}

5.写入图标大小调整的css

.menuIcon{
    font-size: 16px;
}

完。