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

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 或在小部件 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-desktop 图标并将其变为红色。

基本工作示例：

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

试试这个，

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

如果它不起作用，也试试 !important 的强大功能， 希望对您有所帮助:)

Answer 3

我完全同意 @blendenzo 的回答，即制作 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。

Answer 4

您可以在小部件中的每个字体真棒<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 中的每个图标类型，但您必须足够具体才能覆盖您的 widget_custom_html i 样式。以下将起作用：

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