带有引导药丸的主页图标

【问题标题】：home icon with bootstrap pills带有引导药丸的主页图标
【发布时间】：2019-02-24 02:47:51
【问题描述】：

我正在尝试让“主页”图标出现在我的导航链接上，并带有 home 字样，我已将引导程序格式化为药丸。

只有home这个词出现

    <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 放弃了图标字体！检查Bootstrap 4 - Glyphicons migration?

标签： javascript bootstrap-4 icons glyphicons

【解决方案1】：

由于 Bootstrap 不再使用字形图标，您可以尝试使用 font awesome 代替：

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

【讨论】：