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 {
background-color:#19CBCF;
border-radius:150px;
color:#FFFFFF;
font-size:90px;
height:150px;
line-height:150px;
width:150px;
}


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>


thanks!

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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<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>
</div>