change color of circle background, individual colors per icon

Question

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!

Possible duplicate of [How do I give a font awesome icon a background color?](https://stackoverflow.com/questions/27264819/how-do-i-give-a-font-awesome-icon-a-background-color) — pegla, Sep 23 '17 at 03:45
not a duplicate, I'm asking for specific colors (different colors) per icon :) — Kristy, Sep 23 '17 at 04:28

blendenzo · Answer 1 · 2017-09-23T03:14:21.310

You can use the the background-color style attribute on each of the font-awesome <i> tags in your widget. Using your an example:

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

You can use any of the values that background-color would normally accept.

Or, if you want to use a limited number of colors, a better option would be to create CSS classes for each color:

bg-green {
  background-color: green;
}
bg-blue {
  background-color: blue;
}
..... (etc.)

And apply the appropriate class to the HTML in the widget:

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

Or if you want to set different colors for each icon type, but want all instances of that icon to have the same background color (for example, fa-pencil should always have a yellow background), you can assign the colors to each icon type in CSS, but you will have to be specific enough to override your widget_custom_html i style. The following would work:

widget_custom_html .fa-pencil {
  background-color: yellow;
}

score 0 · Answer 2 · answered Sep 23 '17 at 02:54

0

Try this one,

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

In your CSS

.fa .fa-desktop {
   color: red;
}

Also try the power of !important if it is not working, Hope this help :)

answered Sep 23 '17 at 02:54

emjr

232
1
9

1

please try not to use !important, should be used only in rare cases if it's useful, i.e. if styles have been dynamically set inline with javascript and you want to reset them. Other than that I would really avoid using !important, and just try to set your css more precise. – pegla Sep 23 '17 at 03:41

score 0 · Answer 3 · answered Sep 23 '17 at 02:58

0

I totally agree with @blendenzo for his answer that is making css classes and using them in your html elements.

bg-color-red{
 background-color:red;
}

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

However, just want to add that using css is better than inline code style="background-color:red" as you can reuse your css on some other elements.

answered Sep 23 '17 at 02:58

Deepak

376
6
23

thanks! The CSS worked great but its good to know of another option, just in case :) – Kristy Sep 23 '17 at 04:26

score 0 · Accepted Answer · answered Sep 23 '17 at 03:06

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>

thank you, this worked perfectly! I got so far but didn't know how to take that last step. I really appreciate the quick answer — Kristy, Sep 23 '17 at 04:25

change color of circle background, individual colors per icon

4 Answers4