Icon Styles

Sometimes we get into a situation where we need to style the icons as per the need, where we need to find options to style the Font Awesome icons.

We can style the icons in two ways as mentioned below.

  • Add the style attribute and add styles directly to the icon tag <i>
  • Add the style attribute to the icon's parent element or container and add styles

Adding styles directly to the icon tag, which will apply the styles to the icon.

<i class="fa fa-cubes" style="color: purple"></i>

Adding styles to the icon's parent element or container, which will apply the styles to the icon as needed.

<span style="color: purple">
    <i class="fa fa-cubes"></i>
</span>

Examples

We can check the outcome of the below HTML document to see how it looks.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <h1>Style Icons</h1>
    <i class="fa fa-cubes" style="color: purple"></i>
    <span style="color: orange">
        <i class="fa fa-cubes"></i>
    </span>
</body>
</html>

Overall

Adding styles to Font Awesome Icons is very easy and useful.

Related Links