2 颜色 CSS 图标

Question

有没有办法让 css 像 Font Awesome 这样的图标（或任何其他 CSS 图标）有 2 种颜色？

我知道它们是字体，所以颜色可以通过 style='color: red;' 之类的东西来改变，但是有没有办法为图标使用 2 种颜色，比如强调色和主色？

Answer 1

你可以利用color & background-color在同一个图标上控制2种颜色，只要你只需要2种颜色（没有其他背景）即可。

<i class="fa fa-motorcycle blue onred"></i>

.blue {
    color: blue;
}
.onred {
    background-color: red;
}

fiddle

Answer 2

你唯一的选择是，

1. 您可以使用文本阴影为其赋予不同颜色的阴影或描边。

2. 您需要使用 svg 图标来控制路径颜色。