咨询：Font Awesome图标在Materialize集合中与文本对齐及间距异常问题

这个问题的核心是Materialize框架为material-icons类内置了专门的对齐和间距样式，但Font Awesome图标没有自动继承这些样式。咱们可以通过以下几种方式修复：

方法1：自定义CSS匹配Material Icons的样式 #

直接给Font Awesome图标添加和Material Icons一致的间距与垂直对齐样式，这样能保证视觉统一：

首先添加自定义CSS：

/* 匹配Material Icons的左侧图标间距与对齐 */
.collection-item .fab.left,
.collection-item .fas.left {
  margin-right: 15px; /* 和Materialize默认的material-icons间距一致 */
  vertical-align: middle;
}

然后修改你的HTML（可以去掉多余的valign-wrapper，因为collection-item本身已经有垂直居中的样式）：

<div class="col s12 m4 l3 xl2">
  <div class="collection with-header white">
    <h6 class="collection-header"><i class="material-icons left">insert_link</i>Links</h6>
    <!-- Font Awesome Icon - 现在和Material图标样式一致 -->
    <a href="#!" class="collection-item orange-text"><i class="fab fa-github fa-2x left"></i>Font Awesome</a>
    <!-- Material Icon -->
    <a href="#!" class="collection-item orange-text"><i class="material-icons left">insert_chart</i>Material Icons</a>
  </div>
</div>

方法2：内联样式快速修复 #

如果不想写全局CSS，也可以直接给Font Awesome图标加内联样式：

<a href="#!" class="collection-item orange-text">
  <i class="fab fa-github fa-2x left" style="margin-right: 15px; vertical-align: middle;"></i>
  Font Awesome
</a>

为什么会出现这个问题？ #

Materialize的material-icons类默认包含以下样式：

.material-icons {
  vertical-align: middle;
  margin-right: 15px; /* 当使用left类时的间距 */
}

而Font Awesome的fab/fas类没有这些默认样式，所以需要手动添加来对齐文本和调整间距。

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