字体真棒图标在WordPress网站上显示为“汉堡包菜单”倾斜

Question

这似乎与“字体真棒图标未显示”或“字体真棒图标显示为空框”不同。因为在这种情况下，字体超赞的图标几乎显示为倾斜的汉堡菜单，每个菜单有五行：

我已经在我的functions.php文件中加载了Font Awesome and Bootstrap（这是一个WordPress主题）：

<?php

function custom_theme_assets() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style('cancom-bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css', array(), '1.0', 'all');
    wp_enqueue_style('cancom-fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css', array(), '1.0', 'all');
}
 
add_action( 'wp_enqueue_scripts', 'custom_theme_assets');

我将这样在header.php文件中插入图标​​：

<div class="top-header-left">
   <i class="fab fa-facebook-f"></i>
   <i class="fab fa-twitter"></i>
   <i class="fab fa-instagram"></i>
</div>

就像FontAwesome所说的那样in their docs

有人知道为什么图标会以这种方式显示吗？

这是实时站点：

https://cancom.drawyourpets.com/

我在控制台或网络中没有看到任何错误。

Answer 1

您正在使用的字体真棒4.7.0。将其升级到版本5.x或使用适合您版本的语法

https://fontawesome.com/v4.7.0/icon/instagram

<div class="top-header-left">
   <i class="fa fa-facebook"></i>
   <i class="fa fa-twitter"></i>
   <i class="fa fa-instagram"></i>
</div>