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; }