Add a color class to the icon element to change its color

Detailed documentation and more examples you can find in our Bootstrap Icons Docs


Basic example

Colors

amber-text

red-text

indigo-text

cyan-text

green-text

To see all colors options, go to colors list.


<p><i class="fas fa-bolt fa-3x amber-text pr-3" aria-hidden="true"></i> amber-text</p>
<p><i class="fas fa-bug fa-3x red-text pr-3" aria-hidden="true"></i> red-text</p>
<p><i class="fas fa-heart fa-3x indigo-text pr-3" aria-hidden="true"></i> indigo-text</p>
<p><i class="fas fa-bell fa-3x cyan-text pr-3" aria-hidden="true"></i> cyan-text</p>
<p><i class="fas fa-birthday-cake fa-3x green-text pr-3" aria-hidden="true"></i> green-text</p>