css - Font Awesome 图标，上面有字符

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