字体真棒图标在物化集合

Question

我想使用字体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>

材质图标与文本留下了很好的间隙，但字体很棒的图标却没有。

Answer 1

尝试为图标添加一些宽度。而且我认为你不需要在图标上使用.left类。

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

即可

Stack Snippet

.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>

Answer 2

添加CSS通过在字体 - 真棒图标

旁边放置边距来解决问题

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