如果缺少类 fa，FontAwesome 图标将显示为小矩形答案

【问题标题】：FontAwesome icons display as small rectangle if class fa is missing如果缺少类 fa，FontAwesome 图标将显示为小矩形
【发布时间】：2015-01-22 00:43:55
【问题描述】：

在我的网站中，我使用的是 font-awesome 4.2.0，但是有一个奇怪的问题：假设我想要一个正确的插入符号，我必须这样做

<span class="fa fa-caret-right">whatever</span>

如果我把它改成

<span class="fa-caret-right">whatever</span>

将显示一个小矩形，而不是右侧的插入符号图标。我在其他网站上使用 FA4 对其进行了测试，“fa”类不是必需的。这让我很困扰，因为“fa”类将整个跨度的 font-family 设置为“fontawesome”，覆盖了我自己的跨度 font-family。

这里有一点背景，可能是信息性的：我用joomla建立我的网站并使用RocketTheme Corvus模板，它集成了Font-awesome 3.0（似乎在这个模板中自定义了FA。使用FA图标，而不是@ 987654326@，必须使用icon-icontype)。我完全按照这篇文章http://www.rockettheme.com/forum/joomla-general-questions/225736-updating-your-template-from-font-awesome-3-to-4?start=0#1112560 中的说明升级到FA4，却发现FA 图标不会显示。而且页面有几个错误，其中两个是

http://localhost/xrsand/libraries/gantry/assets/jui/fonts/font-awesome/fontawesome-webfont.ttf?v=4.2.0 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost/xrsand/libraries/gantry/assets/jui/fonts/font-awesome/fontawesome-webfont.woff?v=4.2.0 Failed to load resource: the server responded with a status of 404 (Not Found)

与帖子中的step3相反，它说我需要创建一个font-awesome4文件夹，这两个错误表明系统无法加载路径包含font-awesome文件夹但没有“4”的文件。所以我尝试将文件夹的名称从“font-awesome4”更改为“font-awesome”，FA 图标正在工作......除了我必须添加类“fa”。我不确定问题是否与我如何升级版本以及我更改文件夹名称有关，我将其放在这里仅供参考。

【问题讨论】：

标签： css font-awesome

【解决方案1】：

我自己找到了解决方法。

[class^="fa-"]:before, [class*=" fa-"]:before{font-family:fontawesome}

上面的 CSS 将确保 FA 图标实际存在的伪 :before 内容将 font-family 设置为 fontawesome。有了这个我可以删除'fa'类。在我看来，“fa”类的存在只是为了将字体系列设置为 fontawesome（还有许多其他 CSS 规则与之相关，但在我看来只有字体系列很重要）

如果有人认为这可能会导致一些潜在问题，请告诉我。

顺便说一下，我在 font-awesome 的官网上测试了它，令人惊讶的是，如果我删除 class 'fa'，图标会变成一个丑陋的矩形。这对我来说有点不安，他们制定“fa”类任务是有原因的，不是吗？

【讨论】：