change color of icon font awesome code example

Example 1: css change font awesome icon color

<a href="/users/edit"><i class="fa fa-cog" style="color:black !important;"></i> Edit profile</a>

Example 2: font awesome color icons

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-camera"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fas fa-camera"></i>
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
  <i class="fas fa-camera"></i>
  </span>
</span>

Example 3: change font awesome icon color

.fa {
    color: red !important;
}

Example 4: css change font awesome icon color

.<fa-icon-class> { color: red !important; }

Example 5: submenu icon font awesome

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>  Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>  Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  Settings</a>
</div>

Example 6: how to change color of font awesome icons

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

Tags:

Css Example

Recent Posts