为什么我的两个菜单“Font Awesome”图标突然显示为正方形？答案

【问题标题】：Why are two of my menu "Font Awesome" icons suddenly showing as squares?为什么我的两个菜单“Font Awesome”图标突然显示为正方形？
【发布时间】：2020-04-02 09:10:46
【问题描述】：

请看：

https://www.publictalksoftware.co.uk

我看到了其他问题。我不明白为什么突然之间我的一些字体很棒的图标现在显示为正方形，而以前没有。

捐款
脸书

代码正确：

<li id="menu-item-1010" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1010">
    <a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/publictalksoftware"> 
        <i class="_mi _before fa fa-facebook-square" aria-hidden="true"></i>
        <span>Facebook</span>
    </a>
</li>

它在菜单编辑器中仍然可见：

他们一直都很好。我了解到Menu Icons by ThemeIsle使用的图标集是Font Awesome 4.7。

在我的 iPad 上，这两个图标根本不再显示。

【问题讨论】：

标签： css wordpress plugins menu font-awesome

【解决方案1】：

您需要将“fa”的类别更改为“fab”。见下例

之前

<i class="_mi _before fa fa-facebook-square" aria-hidden="true"></i>

使用类“fab”而不是“fa”

<i class="_mi _before fab fa-facebook-square" aria-hidden="true"></i>

【讨论】：

谢谢。不符合 4.7 规范：fontawesome.com/v4.7.0/icon/facebook-square
如前所述，直到今天早上它都运行良好（多年来）。
使用fabfontawesome.com/icons/facebook-square?style=brands的是5.x规范
还定义了超过 1 个版本的 font awesome - 它们相互覆盖
@ObmerkKronen 如何在源代码中识别该问题？你是说我的网站上有 4.7 和 5.0？

【解决方案2】：

我检查了他们的网站，它的 fab 不是 fa！ https://fontawesome.com/icons/facebook-square?style=brands

<i class="fab fa-facebook-square"></i>
this
<i class="_mi _before fab fa-facebook-square" aria-hidden="true"></i>

【讨论】：

是的，适用于版本 5。不是版本 4.7。请参阅我添加到现有答案的评论。
哦，是的！以为你没有提到它。谢谢兄弟