How to change color of icons in Font Awesome 5?

Question

I can\'t colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn\'t work.

HTML Code:

Answer 1

Regular way: as suggested on documentation:

Similarly you can use style tag inside your i tag:

Other way: If you want to target all icons at once using normal css-fontawesome and not the SVG one you have this option as well:

We can add css for color using below class to below classes.

i.fas, i.fab, i.far, i.fal {
   color: #ccc;
}

What's changed with 5.x:

The versions < 5.x were using basic fa fa-icon-name classes to apply icon on i tag. With 5.x FontAwesome has modularized the classes a little bit so we do not have fa now instead we have separate class for solid, regular and brand icons. example:

Solid Style (fas) -

Regular Style (far) -

Light Style (fal) -

Brand Style (fab) -

clock is used as an example, use icon-name instead.