Question

我想拥有自己的图标，我将其保存为pngs作为导航/菜单选项而不是我在引导程序菜单上的当前文本，但我不确定css的哪个部分需要更改？下面是我的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Explore Canterbury</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
  </head>

  <body>

    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#Locations">Locations</a></li>
              <li><a href="#Photos">Photos</a></li>
              <li><a href="#Info">Info</a></li>
            </ul>
          </div><!--/.nav-collapse -->
          <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div><!--/.container-fluid -->
      </nav>
    </div> <!-- /container -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

<强> HTML

<ul class="nav navbar-nav">
  <li class="active"><a href="#Locations">Locations</a></li>
  <li><a href="#Photos"><span class="photosIcon"></span></a></li>
  <li><a href="#Info"><span class="infoIcon"></span></a></li>
</ul>

<强> CSS

.photosIcon {
  background-image:url(urlToYourImage.png);
  width:100px;
  heigth:100px;
}

.infoIcon {
  background-image:url(urlToYourImage.png);
  width:100px;
  heigth:100px;
}

然后你必须对图标进行最后的修改，直到它们达到你想要的效果。

在twitter bootstrap菜单/ nav上用自己的图标替换文本

1 个答案: