Font Awesome 图标，上面有字符

Question

我想要一个很棒的字体，上面有字符，但它做不到that.Please帮助理解发生了什么问题。

输出：

尝试过的代码：

<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 标记 'inside' 它们。

最好的办法就是使用 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; }

Answer 2

您也可以将内容定义为图标：

http://jsfiddle.net/tagliala/77re29ct/24/

.fa-a:before {
   font-family: Arial; /* your font family here! */
   font-weight: bold;
   content: 'A';
}
<span class="fa fa-a"></span><br/>

Font Awesome 图标，上面有字符

Font Awesome Icon with characters on it

css

font-awesome