Question

在我的网站上我使用的是字体很棒的4.2.0，但是有一个奇怪的问题：让我说我想要一个正确的插入符号，我必须这样做

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

如果我将其更改为

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

将显示一个小矩形而不是右侧插入符号图标。我用其他网站使用FA4测试它，＆＃34; fa＆＃34;上课没有必要。这让我感到困扰，因为＆＃34; fa＆＃34; class将font-family设置为＆＃34; fontawesome＆＃34;对于整个范围，覆盖我自己font-family的跨度。

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

icon-icontype

与帖子中的step3相反，后者表示我需要创建一个font-awesome4文件夹，这两个错误表明系统无法加载一个文件，其路径包含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)文件夹而没有＆＃34; 4＆＃34 ;.所以我尝试从＆＃34; font-awesome4＆＃34;更改文件夹的名称。 to＆＃34; font-awesome＆＃34;，并且FA图标正在工作......除了我必须添加类＆＃34; fa＆＃34;。我不确定问题是否与我如何升级版本以及我更改文件夹名称的事实有关，我把它放在这里仅供参考。

Answer 1

我自己找到了解决方法。

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

上面的CSS将确保伪：在内容之前，FA图标实际存在，将font-family设置为fontawesome。有了这个，我可以删除＆＃39; fa＆＃39;类。在我看来，班级＆＃39; fa＆＃39;存在只是为了将font-family设置为fontawesome（还有许多与之关联的CSS规则，但在我看来只有字体系列很重要）

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

顺便说一下，我在font-awesome的官方网站上进行测试，而且令人惊讶的是，如果我删除了类＆＃39; fa＆＃39;，图标将缩小为一个丑陋的矩形。这对我来说是一种不安，他们会让课堂成为现实。任务有理由，不是吗？

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

1 个答案: