Question

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

Answer 1

您可以尝试在.brand标题锚点中添加图标，然后将其与某些css对齐：

<强> CSS

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

看起来不漂亮但有效。

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

Answer 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

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

2 个答案: