Question

我正在尝试在导航链接上显示“家”图标，并在该链接上显示“家”一词，该链接已以引导程序格式化为药丸。

只出现家这个词

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

Answer 1

由于Bootstrap不再使用字形图标，因此您可以尝试使用超棒的字体：

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

主页图标与引导丸

1 个答案: