在 WordPress 网站上显示为倾斜的字体真棒图标 "Hamburger Menus"

Question

这似乎是与 'font awesome icons not showing' 或 'font awesome icons showing up as empty boxes' 不同的问题。因为在这种情况下，字体很棒的图标几乎看起来像倾斜的汉堡菜单，每行五行：

我已经像这样在我的 functions.php 文件中加载了 Font Awesome 和 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

您正在使用 font awesome 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>

在 WordPress 网站上显示为倾斜的字体真棒图标 "Hamburger Menus"

Font Awesome Icons Showing As Slanted "Hamburger Menus" on WordPress Site

html

css

php

wordpress

font-awesome