如何样式化圆形Fontawesome图标背景？ [英] how to stylize a circle Fontawesome icon background?

问题描述

是否有一种简单的方法来正确设置 Fontawesome 图标背景的样式？
我正在尝试使用 icon-remove-sign （具有特殊性是一个圆圈）图标来实现，以使十字架显示为白色

Is there is a simple way to stylize the Fontawesome icons background properly? I was trying to do it with the icon-remove-sign (which has the particularity to be a circle) icon in order to make appear the cross in white and the circle in red.

困难在于图标被识别为正方形，因此我试图将其设置为圆形以便应用红色背景色（但我想知道是否没有更简单的东西）：

The difficulty is that the icon is recognize as a square, so i was trying to make it a circle in order to apply the red background color (but i am wondering if there is not something simpler):

.icon-remove-sign {
    padding: 0;
    border-radius: 25px;
    color: white;
    background-color: red;
}

但这还不够，我们可以在顶部看到红色背景图标。

But it's not enough, we can see the red background at the top of the icon.

您将如何做？

推荐答案

hacky，但我设法在这里工作：

It feels a little hacky, but I managed to get it working here:

http： //jsfiddle.net/3FvxA/

display：block 并为其指定高度和宽度似乎是秘密。

display:block and giving it a height and width seems to be the secret.

这篇关于如何样式化圆形Fontawesome图标背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！