home icon with bootstrap pills

Question

I am trying to get the "home" icon to appear with the word home on my nav link to I have formatted with bootstrap as a pill.

only the word home is appearing

    <ul class="nav nav-pills">
        <li class="nav-item">
            <a href="home.html" class="nav-link">
            <span class="glyphicons glyphicons-home">Home</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="menu.html">Menu</a></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact Us</a>
        </li>
    </ul>

Bootstrap 4 has dropped the icon font! Check [Bootstrap 4 - Glyphicons migration?](https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration) — Ram, Sep 19 '18 at 21:18

MichaelvE · Answer 1 · 2018-09-19T21:54:54.540

Since Bootstrap are no longer using glyphicons, you can try using font awesome instead:

@import url("https://use.fontawesome.com/releases/v5.3.1/css/all.css");

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="home.html" class="nav-link">
      <i class="fas fa-home"></i>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="menu.html">Menu</a></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="contact.html">Contact Us</a>
  </li>
</ul>

home icon with bootstrap pills

1 Answers1