使用字体真棒图标作为CSS内容
我想使用一个字体真棒图标作为CSS内容，即，
a:before { content: "<i class='fa...'>...</i>"; } 我知道我不能在content使用HTML代码，那么它只剩下图像了吗？
这是使用它的错误方法。 打开字体真棒样式表，去你要使用的字体的class说fa-phone ，复制该类下的内容属性与实体，并使用它像：
a:before { font-family: FontAwesome; content: "\f095"; }
演示
只要确保如果你正在寻找一个特定a标签，然后考虑使用一个class ，使其更具体，如：
a.class_name:before { font-family: FontAwesome; content: "\f095"; }
使用上面的方法将图标与你的剩余文本粘在一起，所以如果你想在它们两个之间留一点空间，使它display: inline-block; 并使用一些padding-right ：
a:before { font-family: FontAwesome; content: "\f095"; display: inline-block; padding-right: 3px; vertical-align: middle; }
进一步扩展这个答案，因为很多可能需要更改hover图标，所以我们可以编写一个单独的select器和规则:hover action：
a:hover:before { content: "\f099"; /* Code of the icon you want to change on hover */ }
演示
现在在上面的例子中，由于不同的大小，图标会发生移动，您肯定不会这样做，所以您可以在基本声明上设置一个固定的width
a:before { /* Other properties here, look in the above code snippets */ width: 12px; /* add some desired width here to prevent nudge */ }
演示
另一个解决scheme，你不必手动弄乱的Unicode字符可以在制作字体真棒真棒 – 使用图标没有我的标签 （ 免责声明：我写这篇文章 ）。
简而言之，您可以创build一个像这样的新类：
.icon::before { display: inline-block; margin-right: .5em; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }
然后使用它与任何图标，例如：
<a class="icon fa-car" href="#">This is a link</a>
如果您可以使用font-awesome访问SCSS文件，则可以使用以下简单的解决scheme：
.a:after { // Import mixin from font-awesome/scss/mixins.scss @include fa-icon(); // Use icon variable from font-awesome/scss/variables.scss content: $fa-var-exclamation-triangle; }
