带有字符的Font Awesome Icon

Question

我想在其上添加带有字符的超赞字体，但这样做失败。请帮助了解发生了什么问题。

输出：

尝试过的代码：

<i class="fa fa-square fa-2x" style="color:red;"><span style="text-color:white;">S</span></i>
<i class="fa fa-square fa-2x" style="color:yellow;"><span style="text-color:white;">XL</span></i>                                           
<i class="fa fa-square fa-2x" style="color:green;"><span style="text-color:white;">XXL</span></i>

Answer 1

您不应该使用Font Awesome，因为这只会使用CSS内容输出图标，并且您不能在其中放置任何HTML标记。

最好的办法就是使用span标签，并使用CSS设置其样式。

http://jsfiddle.net/7uevq7pu/

HTML：

<span class="red">XL</span>
<span class="yellow">S</span>
<span class="green">XXL</span>

CSS：

span { border-radius:5px;padding:0 5px;text-align:center; }
.red { background:red; }
.yellow {background:yellow; }
.green { background:green; }