導航欄中品牌名稱前的圖標

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

來源

2012-07-16 Anders

圖標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/

來源

2012-07-16 00:46:42

這工作。我的品牌名稱仍然比應該高一點，所以我添加了一個.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

來源

2014-03-12 16:32:59

您確定要使用內聯樣式嗎？ – Anders 2014-03-12 20:31:36

不是 - 只是爲了說明。 – 2014-03-13 14:48:15

導航欄中品牌名稱前的圖標

回答

相關問題