在引导菜单中使用图标？答案

【问题标题】：Using icons in bootstrap menu?在引导菜单中使用图标？
【发布时间】：2016-01-29 02:27:50
【问题描述】：

我正在尝试将自己的图标添加到引导菜单，但它们没有出现。我想知道我是否在编辑 CSS 的错误部分？以下是我的代码，网站在这里：http://sc580.student.eda.kent.ac.uk/ExploreCanterbury/

<!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><a href="LocMenu"><span class="#LocIcon"></span></a></li>
              <li><a href="PhotoMenu"><span class="#photosIcon"></span></a></li>
              <li><a href="InfoMenu"><span class="#infoIcon"></span></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>

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

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

【问题讨论】：

您通过图像而不是文本意识到屏幕阅读器将无法看到您的菜单...对吗？
以#开头的类无效
“我想知道我是否在编辑错误的 CSS 部分？” – 您的浏览器的开发人员工具是查找此类内容的有效方法。
How to add custom icon in Twitter Bootstrap?的可能重复
你应该阅读这个问题stackoverflow.com/questions/10393325/…

标签： html css twitter-bootstrap

【解决方案1】：

删除这些行中的#：

<li><a href="LocMenu"><span class="#LocIcon"></span></a></li>
<li><a href="PhotoMenu"><span class="#photosIcon"></span></a></li>
<li><a href="InfoMenu"><span class="#infoIcon"></span></a></li>

现在，修正你拼错的 HEIGHT，并将你的 CSS 包裹在样式标签中，如下所示：

<style>
.photosIcon {
background-image:url(img/photos.png);
width:100px;
heigHT:100px;
}
.infoIcon {
background-image:url(img/information.png);
width:100px;
heigHT:100px;
}
</style>

还有中提琴。

【讨论】：

在发现更多问题后，我编辑了回复。

【解决方案2】：

您的班级名称不应以 # 开头。

<li><a href="LocMenu"><span class="#LocIcon"></span></a></li>
<li><a href="PhotoMenu"><span class="#photosIcon"></span></a></li>
<li><a href="InfoMenu"><span class="#infoIcon"></span></a></li>

这应该是：

 <li><a href="LocMenu"><span class="LocIcon"></span></a></li>
 <li><a href="PhotoMenu"><span class="photosIcon"></span></a></li>
 <li><a href="InfoMenu"><span class="infoIcon"></span></a></li>

然后，您可以通过在类名前添加 . 来引用 css 中的类。

<style>

.photosIcon {
  width: 100px
  ...
}
.infoIcon {
  width: 100px
  ...
}

</style>

对于 id，您可以在 css 中添加 #。

<div id="mydiv"></div>

在 css 中会这样引用：

<style>

#mydiv{
   width: 100px;
...
}

</style>

【讨论】：

谢谢 :) 我已经改变了，但图像似乎仍然没有出现！
您在问题中链接的网站不可用
@user3005003 确定目录中存在文件吗？

【解决方案3】：

现在您已经解决了语法问题（从其他答案），您剩下的问题可能在于 this StackOverflow post 关于 CSS background-image。

【讨论】：