2 颜色 CSS 图标

Question

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

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

Answer 1

你唯一的选择是，

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

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

Answer 2

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

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

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

fiddle