2 Color CSS Icons

Question

Is there a way to make css icons like Font Awesome (or any other CSS icons) have 2 colors?

I know they are fonts so the color can be changed by something like style='color: red;', but is there a way to use 2 colors for the icons like an accent color and a main color?

Answer 1

The only options you have are,

1. You can use text-shadow to give it a different colored shadow or stroke.

2. You would need to use svg icons to control the path colors.

Answer 2

You can utilize color & background-color to control 2 color on the same icon, as long as you only need 2 colors (no other background).

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

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

fiddle