Basic Use

Font Awesome Icons are designed to be used with HTML inline elements like <i> and <span> as shown below.

However, the preferred HTML element for Font Awesome Icons is <i> and <span> for its styling, both the elements work but we suggest using the element <i> for these icons.

Each icon is defined using two classes, one of them is required for all icons and the other varies with each icon that refers icon name.

  • Class fa is required for each icon
  • Class fa-name determines the icon name, where the word name must be replaced with the actual icon name
<i class="fa fa-cubes"></i>
<span class="fa fa-users"></span>

Reference

Here is the official documentation for Font Awesome, which can be referred to for icons availability.

Examples

<!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>
    <i class="fa fa-cubes"></i>
    <span class="fa fa-users"></span>
</body>
</html>

Overall

It's quite easy to include and use Font Awesome Icons in our web applications.

Related Links