- 首先打开浏览器检查path标签内是否含有fill属性,若有fill属性无论外面怎么加important都改不动。如果可以直接svg标签中的fill属性,就把fill属性给删了,在外面就可以直接加color修改样式。
- vue-awesome中图标的path标签中没有fill属性,但是在外部各种方法都试了还是改不动
之后使用:
.fa-icon {
fill: currentColor;
}
解决了,特地搜了currentColor对fill属性的影响。
- 在css中,currentColor是一个变量,这个变量的值是当前元素的color值。
- 如果当前元素没有在CSS里显示地指定一个color值,那它的颜色值就遵从CSS规则,从父元素继承而来。
其中还试了其他方法给大家参考:
1.全部图标更改颜色:新建main.css文件,引入到main.js中,css中内容如下:
css /* main.css */ .fa.icon { color: red; }
2.直接在当前组件中的style标签中设置
.fa-icon {
color: tomato !important;
}
3.<icon :name="'arrow-circle-left'" :style="{ color: 'red' }"/>或者在icon标签中添加color="red"