导航栏中品牌名称前的图标答案

【问题标题】：Icon in front of brand name in navbar导航栏中品牌名称前的图标
【发布时间】：2012-07-16 00:06:03
【问题描述】：

我正在使用 twitter-bootstrap。我想知道你是如何在品牌名称前面放置一个图标的。不知何故，图标似乎也比文本小得多。如何解决这个问题，让它看起来不错？

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
     <div class="container">
      <i class="icon-signal icon-white"></i>
      <a class="brand" href="#">Internett</a>
   </div>
  </div>

【问题讨论】：

图标宽度/高度不随文字变化，图片为静态14px。这是你的问题吗？
大小并不是真正的问题。就是摆放位置。我希望它死在文本前面，但它不是。我的问题中有一些代码。

标签： twitter-bootstrap nav

【解决方案1】：

您可以尝试在 .brand 标题锚点中包含图标，然后将其与一些 css 对齐，如下所示：

CSS

.brand i {
    margin-top: -4px;
    vertical-align: middle;
}

看起来不漂亮，但很管用。

演示：http://jsfiddle.net/andresilich/HGMdM/

【讨论】：

这行得通。我的品牌名称仍然比应有的高一点，所以我添加了一个 .brand { margin-top: 2px; } 现在很棒了。
这个bug在bootstrap 3.1中依然存在

【解决方案2】：

解决方案：

margin:-4px

例子：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><i style="margin:-4px 0; color:pink" class="glyphicon glyphicon-heart"></i> <?= $config->siteName ?></a>
    </div>
      <p class="navbar-text"><i style="color:pink" class="glyphicon glyphicon-heart"></i> <?= $config->siteTagline ?></p>
  </div>
</nav>

内联用于演示。您也可以内联 <style> 或添加到您的 CSS 文件中。

向 Bootstrap 报告的问题：https://github.com/twbs/bootstrap/issues/13100

【讨论】：

您确定要使用内联样式吗？
不——只是为了说明。