logo标签列表

字体库图标在Bootstrap导航栏中无法显示

htmltwitter-bootstrapfont-awesome
4

我试图在导航栏的“关于”链接附近放置一个 Font-awesome 图标，但它没有显示出来。

以下是包含的 Bootstrap 和 Font-awesome 文件：

 <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="screen">
  <link rel="stlyesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" media="screen">

这是Bootstrap的导航栏（navbar）。
    <!-- Navbar -->
    <div class="navbar navbar-default navbar-static-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand text-muted" href="#">ASDF</a>
          <div class="collapse navbar-collapse">
            <div class="navbar-right">
              <button type="button" class="btn btn-default navbar-btn btn-success">Register</button>
              <button type="button" class="btn btn-default navbar-btn btn-primary">Log In</button>
           </div>
            <ul id="navbarLinks" class="nav navbar-nav navbar-right">
              <li><a href="#">Discover</a></li>
              <li><a href="#">Merchants</a></li>
             <!-- ********************************************* -->
             <!-- ********************************************* -->
             <li><a href="#">About</a><span class="fa fa-question"></span></span></li>
             <!-- ********************************************* -->
             <!-- ********************************************* -->
              <li class="dropdown">
                <a data-toggle="dropdown" data-target="#" href="#">Resources<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Support</a></li>
                  <li><a href="#">Blog</a></li>
                </ul>
              </li>
            </ul>
          </div> <!-- collapse navbar-collapse -->
        </div><!-- container -->
       </div><!-- navbar-inner -->
    </div>
    <!-- End Navbar -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
1个回答
5

您的锚点标签具有以下CSS属性：

display:block;

所以，当你将图标放在锚点标签之后时，“About”将占据整个块空间，并显示在图标下方。为了解决这个问题，你可以简单地在锚点标签中包含图标。
<li><a href="#">About <span class="fa fa-question"></span></a></span></li>

这是您操作的样子： 演示
绝妙的 Codepen！ - port5432
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接