时间戳

首页 > 解决方案 > 带有引导药丸的主页图标

javascript - 带有引导药丸的主页图标

问题描述

我试图让“主页”图标出现在我的导航链接上，并带有 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>

标签： javascriptbootstrap-4iconsglyphicons

解决方案

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

推荐阅读