字体真棒图标在具体化集合中的文本旁边没有正确排列答案

【问题标题】：font awesome icons do not line up correctly next to text in materialize collection字体真棒图标在具体化集合中的文本旁边没有正确排列
【发布时间】：2018-07-07 04:41:45
【问题描述】：

我想使用 font awesome 中的一些图标，而不是 google 的材料图标，但是 font awesome 图标在链接集合中没有正确排列。

<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 -->
    <a href="#!" class="collection-item orange-text valign-wrapper"><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>

材料图标与文本留有很好的差距，但字体真棒图标没有。

【问题讨论】：

你也可以添加css吗？
是的，我刚刚意识到我可以添加自己的 css 来解决它。

标签： html css font-awesome materialize

【解决方案1】：

尝试给图标一些宽度。正如我所见，您不需要对图标使用.left 类。

只需使用display:inline-block 和vertical-align:middle;

堆栈片段

.collection i {
  width: 40px;
  vertical-align: middle;
  display: inline-block;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<div class="col s12 m4 l3 xl2">
  <div class="collection with-header white">
    <h6 class="collection-header"><i class=" material-icons">insert_link</i>Links</h6>
    <a href="#!" class="collection-item orange-text valign-wrapper"><i class="fab fa-github fa-2x"></i>Font Awesome</a>
    <a href="#!" class="collection-item orange-text"><i class="material-icons">insert_chart</i>Material Icons</a>
  </div>
</div>

【讨论】：

【解决方案2】：

添加 CSS 通过在字体很棒的图标旁边添加边距来解决问题

 .fa-2x {
    margin-right: 15px;
 }

【讨论】：