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

问题描述：

我正在使用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>

图标widht /高不随文字的变化，图像是静态14px的。这是你的问题吗？ – 2012-07-16 00:30:51

大小并不是真正的问题。这是放置。我希望它死在文本前，而不是。我的问题中有一些代码。 – Anders 2012-07-16 00:32:53

答

您可以尝试包括.brand标题锚点的图标，只是一些CSS像这样对齐：

CSS

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

看起来不漂亮，但它的工作原理。

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

这工作。我的品牌名称仍然比应该高一点，所以我添加了一个.brand {margin-top：2px; }现在它很棒。 – aalaap 2012-09-17 09:27:13

这个错误在bootstrap中仍然存在3.1 – 2014-03-12 16:28:03

答

解决方案：

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文件。

问题报告来引导：https://github.com/twbs/bootstrap/issues/13100

您确定要使用内联样式吗？ – Anders 2014-03-12 20:31:36

不是 - 只是为了说明。 – 2014-03-13 14:48:15

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

相关推荐