Search code examples
htmlcssfont-awesomematerialize

font awesome icons do not line up correctly next to text in materialize collection

I want to use some of the icons from font awesome rather than google's material icons, however the font awesome icons do not line up correctly in a link collection.

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

The material icon leaves a nice gap to the text, but the font awesome icon doesn't.

enter image description here

Solution

  • Try to give some width to the icons. And as I see you don't need to use .left class to the icons.

    Simply use display:inline-block and 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>