I have the following code

    <div class="container login-container">
            <h3>Your current friends</h3>
            <a href="/"class="waves-effect waves-light btn"><i class="material-icons">home</i>Home</a>
            <a href="/friends/add"class="waves-effect waves-light btn"><i class="material-icons">plus</i>Add more friends</a>
    </div>

But for some reason, the icon in the second button breaks the design as the following:

r/web_design - Font awesome breaks layout

But if I set the second icon to also be “home” it works fine

r/web_design - Font awesome breaks layout

Any idea what could be the problem?

Also – why isn’t the icon and the text aligned in heigth?

The CSS

.login-container {
  width: 500px;
  margin-top: 50px;
  text-align: center;
}

The container class comes from materialize



Source link

Write A Comment