Font Awesome V4 - Icon Styles Example

Using Font Awesome Icons within a web page is super easy

  • Include the icon library CDN within the head section of a document
  • Then access the icons using their predefined classes from the library

Here is the example, where we have changed the styles of Font Awesome Icons by applying CSS properties.

Run this on IDE

<!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

This example helps us understand different ways to change the icon styles of Font Awesome Icons.

Related Links