2个颜色CSS图标

Question

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

我知道它们是字体，因此颜色可以通过类似style='color: red;'的颜色进行更改，但有没有办法为图标使用2种颜色，如强调色和主色？

Answer 1

你唯一的选择是，

1. 您可以使用text-shadow为其指定不同颜色的阴影或笔触。

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

Answer 2

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

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

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

fiddle