Bootstrap卡片中Font Awesome图标显示为方形的原因及解决方法

嘿，我来帮你排查这个Font Awesome图标显示异常的问题，这种方形占位符+hover阴影不对的情况我碰到过好几次，主要有几个常见原因，对应修复方法也很明确：

可能的成因 #

• Font Awesome资源加载失败：你用的是//开头的相对协议链接，如果页面运行在HTTP环境下，部分CDN可能会拒绝非HTTPS请求，或者网络问题导致字体文件没加载成功。图标本质是特殊字体，字体加载失败就会显示默认的方形占位符。
• 类名使用错误：Font Awesome 4.7.0和5.x的类名差异很大，比如4.x用fa fa-facebook，而5.x用fab fa-facebook。如果你误用了5.x的类名但加载的是4.7.0的库，就会识别不出图标，显示方形。
• Bootstrap样式冲突：Bootstrap 4的全局样式可能给inline元素（比如<i>）加了默认的box-shadow或者字体样式，导致hover阴影作用在图标的方形容器上，而非图标本身。
• 未添加基础类：忘记写fa这个基础类，只写图标类（比如fa-facebook），也会导致图标无法正确渲染。

对应的修复方法 #

• 修复资源链接：把Font Awesome的CSS链接改成带完整协议的版本，避免协议不匹配问题：

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  

  同时打开浏览器控制台的「Network」标签，确认这个CSS文件和对应的字体文件（.woff/.woff2等）都成功加载，没有404错误。

• 修正图标类名：严格使用Font Awesome 4.7.0的正确类名格式，比如：

  <i class="fa fa-twitter" aria-hidden="true"></i>
  <i class="fa fa-github" aria-hidden="true"></i>
  

  别用fab/fas这类5.x的前缀，4.x只有fa作为基础前缀。

• 调整Hover阴影的目标：图标是字体元素，建议用text-shadow代替box-shadow来实现hover效果，这样阴影会贴合图标形状：

  .fa:hover {
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  }
  

  如果一定要用box-shadow，需要把图标设置为inline-block，让元素尺寸贴合图标：

  .fa {
    display: inline-block;
  }
  .fa:hover {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  }
  

• 解决样式冲突：给图标添加自定义类，强制覆盖Bootstrap的默认样式：

  .custom-fa-icon {
    font-family: 'FontAwesome' !important;
    box-shadow: none !important; /* 移除Bootstrap可能添加的默认阴影 */
  }
  

  然后在图标标签上应用这个类：

  <i class="fa fa-linkedin custom-fa-icon" aria-hidden="true"></i>
  

内容的提问来源于stack exchange，提问作者Austin Larson