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

这似乎是一个不同的问题,从'字体可怕的图标不显示'或'字体可怕的图标显示为空框'。因为在本例中,字体图标几乎显示为倾斜的汉堡包菜单,每个菜单有五行:

我已经在我的 functions.php 像这样的文件(这是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>

in their docs

有人知道为什么图标会这样出现吗?

以下是现场直播:

https://cancom.drawyourpets.com/

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