更改圆形背景的颜色，每个图标的单独颜色

Question

我在wordpress上的自定义HTML小部件中使用字体超棒的图标。使用CSS使用此代码

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

我已成功能够改变图标和背景圆圈的颜色在小部件的所有图标

我不知道是否有一种方法，无论是与CSS或在widget HTML来设置每个图标的背景颜色。我正在使用图标fa-pencil，fa-graduation-cap，fa-desktop。这里是我使用的小部件本身的HTML图标...

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

谢谢！

Answer 1

设置共享属性后，可以使用每个图标的类来定位它。

例如

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

只会改变FA-桌面图标，使其红色。

基本工作例如：

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>

Answer 2

您可以在窗口小部件中的每个字体真棒<i>标签上使用background-color样式属性。使用您的示例：

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

您可以使用任何background-color通常会接受的值。

或者，如果你想使用的颜色数量有限，更好的办法是为每种颜色创建CSS类：

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

并应用适当的类在插件的HTML：

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

或者，如果你想为每个图标类型设置不同的颜色，但希望该图标的所有实例都具有相同的背景颜色（例如，fa-pencil应该始终有一个黄色背景），你可以指定颜色到CSS中的每个图标类型，但你会h要足够具体，以覆盖您的widget_custom_html i风格。下面将工作：

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

Answer 3

试试这个，

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

在你的CSS

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

也可以尝试的力量重要，如果它不能正常工作， 希望！这个帮助:)

Answer 4

我完全同意@blend恩佐为他的答案是制作CSS类，并在你的HTML元素中使用它们。

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

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

然而，只是想补充一点，使用CSS比嵌入代码style="background-color:red"更好，因为你可以在一些其他元素重用你的CSS。