阿里巴巴iconfont svg本地不能更改颜色?(已解决)

2018-9-6 8:53:15 5,222 views

iconfont svg颜色修改

之前一直疑惑iconfont svg颜色不能修改,用的是Symbol在线代码。

svg图标带有fill属性(使用Symbol在线引用)

这种方式就不能本地修改fill属性了,需要在项目中移除默认颜色

具体操作如图所示

svg图标带有fill属性(下载到本地)

如果选择的是多色图标且下载到本地的话,默认是带有颜色的需要修改的话,需要在编译器里面打开svg  然后将fill属性制空即可,然后在需要的时候使用css 例如svg {fill:red}即可填充颜色。当然有些图标没有fill属性的话是可以直接修改的。

下载

项目中使用

最终效果图

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

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

</svg>

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

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

</svg>

<script src="//at.alicdn.com/t/font_819181_moiu3kic03.js" type="text/javascript" charset="utf-8"></script>

 

css

svg { height: 32px; width: 32px; } svg:last-of-type { fill: red; }

 

 

220

3 Comments

  • akbq2008 2019年1月16日 at 下午3:29

    you should make a media inquiry for your website

  • 2019年9月10日 at 下午3:19

    那下载svg素材怎么去颜色

    • akbq2008 2019年10月8日 at 下午9:11

      文章gif图片操作很详细了啊!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。