您需要根据您尝试呈现的图标类型将其更改font-family为Font Awesome 5 BrandsOR 。Font Awesome 5 Free另外，别忘了声明font-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

演示

您可以阅读下面的其余答案以了解其工作原理并了解图标和文本之间间距的一些解决方法。

FontAwesome 4 及以下

那是错误的使用方式。打开字体真棒样式表，转到class您要使用的字体say fa-phone，复制该类下的内容属性与实体，然后像这样使用它：

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

演示

只要确保如果您要定位特定a标签，然后考虑使用 aclass来使其更具体，例如：

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操作规则：

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 */
}

演示