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

我在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铅笔，fa毕业帽，fa桌面。这是我在小部件中为图标使用的HTML

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

---

谢谢

您可以在小部件中的每个字体标签上使用

背景色
样式属性。使用您的示例：

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

并将适当的类应用于小部件中的HTML：

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

您可以在小部件中的每个字体标签上使用
背景色
样式属性。使用您的示例：

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

并将适当的类应用于小部件中的HTML：

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

试试这个

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

也可以试试的力量！重要信息如果它不工作，
希望有帮助：）
试试这个

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

也可以试试的力量！重要信息如果它不工作，
希望有帮助：）
我完全同意@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>

bg颜色红色{
背景色：红色；
}


但是，我想补充一点，使用css比内联代码要好，因为您可以在其他元素上重用css。
我完全同意@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>

bg颜色红色{
背景色：红色；
}


但是，只想补充一点，使用css比内联代码要好，因为您可以在其他一些元素上重用css。
您可以在设置共享属性后使用每个图标的类来定位它

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

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

比如说

.widget\u custom\u html i.fa-desktop{背景色：红色}

只会更改fa桌面图标并使其变为红色

基本工作示例：


p{
文本对齐：居中；
}
.widget\u自定义\u html i{
边界半径：150px；
颜色：#FFFFFF；
字体大小：90px；
高度：150像素；
线高：150px；
宽度：150px；
}
.widget_自定义_html i.fa-desktop{
背景色：红色；
}
.widget\u custom\u html i.fa-grading-cap{
背景颜色：蓝色；
}
.widget_自定义_html i.fa-pencil{
背景颜色：绿色；
}




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

比如说

.widget\u custom\u html i.fa-desktop{背景色：红色}

只会更改fa桌面图标并使其变为红色

基本工作示例：


p{
文本对齐：居中；
}
.widget\u自定义\u html i{
边界半径：150px；
颜色：#FFFFFF；
字体大小：90px；
高度：150像素；
线高：150px；
宽度：150px；
}
.widget_自定义_html i.fa-desktop{
背景色：红色；
}
.widget\u custom\u html i.fa-grading-cap{
背景颜色：蓝色；
}
.widget_自定义_html i.fa-pencil{
背景颜色：绿色；
}




请尽量不要使用！重要的是，只有在极少数情况下才应该使用它，如果它是有用的，例如，如果样式是通过javascript内联动态设置的，并且您希望重置它们。除此之外，我真的会避免使用！重要的是，请尽量将css设置得更精确。请尽量不要使用！重要的是，只有在极少数情况下才应该使用它，如果它是有用的，例如，如果样式是通过javascript内联动态设置的，并且您希望重置它们。除此之外，我真的会避免使用！重要的是，请尝试将css设置得更精确。可能重复的不是重复的，我要求每个图标使用特定的颜色（不同的颜色）：）可能重复的不是重复的，我要求每个图标使用特定的颜色（不同的颜色）：）谢谢，这非常有效！我走了这么远，但不知道如何迈出最后一步。我真的很感激你这么快answer@Kristy不用担心，很乐意帮忙。谢谢你，这非常有效！我走了这么远，但不知道如何迈出最后一步。我真的很感激你这么快answer@Kristy不用担心，很乐意帮忙。谢谢！CSS工作得很好，但是知道另一个选项很好，以防万一：）谢谢！CSS工作得很好，但知道另一个选项很好，以防万一：）