Question

我在wordpress上的自定义HTML小部件中使用字体真棒图标。使用CSS我已经成功地使用此代码更改了该窗口小部件中所有图标的图标和背景圈的颜色

bind

我想知道是否有办法，无论是使用CSS还是使用小部件HTML来设置每个图标的背景颜色。我正在使用图标fa-pencil，fa-graduation-cap，fa-desktop。以下是我在小部件中使用的HTML图标...

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

谢谢！

Answer 1

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

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

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

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

例如

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

只会更改fa-desktop图标并将其设置为红色。

基本工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: