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

我在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>

谢谢！

来源

2017-09-23 Kristy

的可能的复制[？我怎么给字体真棒图标背景色（https://stackoverflow.com/questions/ 27264819 /如何给我一个字体真棒图标背景颜色） – pegla

不是重复，我要求具体颜色（不同颜色）每个图标:) – Kristy

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

例如

.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>

来源

2017-09-23 03:06:46

谢谢你，这工作完美！我到目前为止，但不知道如何采取最后一步。我真的很感激快速的回答 – Kristy

@Kristy不用担心，很乐意帮忙。 –

您可以在窗口小部件中的每个字体真棒<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; 
}

来源

2017-09-23 02:48:38 blendenzo

试试这个，

<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; 
}

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

来源

2017-09-23 02:54:51 emjr

请尽量不要使用！重要的，只应用于极少数情况下，如果它有用，即风格如何已经动态设置与JavaScript内联，你想重置它们。除此之外，我真的会避免使用！重要的，只是尝试设置您的CSS更加精确。 – pegla

我完全同意@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。

来源

2017-09-23 02:58:18 Deepak

谢谢！ CSS工作得很好，但很好的知道另一种选择，以防万一:) – Kristy

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

回答

相关问题