Kristy Kristy - 24 days ago 7
CSS Question

change color of circle background, individual colors per icon

I am using font awesome icons in the custom HTML widget on wordpress. Using CSS I have successfully been able to change the color of the icon and background circle for all icons in that widget using this code

.widget_custom_html i {

I'm wondering if there is a way, either with CSS or in the widget HTML to set the background color for each icon. I am using the icons fa-pencil, fa-graduation-cap, fa-desktop. Here is the HTML I am using in the widget itself for the icons...

<p style="text-align: center;"><i class="fa fa-desktop" aria-hidden="true"></i></p>


Answer Source

You can use each icon's class to target it after you've set the shared properties.

For example

.widget_custom_html i.fa-desktop {background-color:red};

would only change the fa-desktop icon and make it red.

Basic working example:

p {
  text-align: center;

.widget_custom_html i {
  border-radius: 150px;
  color: #FFFFFF;
  font-size: 90px;
  height: 150px;
  line-height: 150px;
  width: 150px;

.widget_custom_html i.fa-desktop {
  background-color: red;

.widget_custom_html i.fa-graduation-cap {
  background-color: blue;

.widget_custom_html i.fa-pencil {
  background-color: green;
<link rel="stylesheet" href="" />

<div class="widget_custom_html">
  <p><i class="fa fa-desktop" aria-hidden="true"></i></p>
  <p><i class="fa fa-graduation-cap" aria-hidden="true"></i></p>
  <p><i class="fa fa-pencil" aria-hidden="true"></i></p>