# 如何独立控制组件文字和图标颜色

[选中、hover样式的通用处理规则](./33.选中、hover样式的通用处理规则.md)中通用效果的实现中包含了`color`样式的设置.

对于一些图标+文字的节点,很多时候不需要在节点选中时候图标颜色也随之改变.

![示例](../images/36.png)

而我们的图标是用icon-font实现的,本质上也是一个文本.那么其颜色属性就会向上继承.如果父节点设置了颜色,那么子节点颜色也会随之改变.

问题的本质是是CSS继承与优先级问题.对应到FineUI中,如果对图标指定`color`属性,那么图标的颜色优先级高于外部`.bi-list-item`等节点效果控制颜色.

如果未指定`color`属性,那么图标颜色继承自父级,会随着各种节点选中效果变化.

如何为图标指定颜色呢,FineUI中定义字体图标的`.font()`less方法,可以指定颜色.

```less
.font(@class, @content, @color: @color-bi-font-native) {
  @fc: "\@{content}";
  .@{class} {
    & .b-font:before {
      content: @fc;
      color: @color;
    }
    &.disabled .b-font:before {
      content: @fc;
      color: @color;
    }
  }
}
```

定义字体时注意事项

1. 一般情况下,如果一个字体图标类名并不是用在特例场景,那么不要对其设置颜色,例如`delete-font, edit-font`等.否则会失去可复用性.
2. 避免对`.b-font`类名施加样式规则来控制字体图标样式.这样副作用比较明显,影响范围不可控.
3. 如果需要一个指定配色的字体图标,可以额外定义一个.如`.font(xxx-delete-font, @font-delete, @color-red)`