在導航圖標css下包裝文本

我想創建一個導航欄使用html5和css，它需要與ie8一起工作。我已經成功完成了我需要做的一切，但只有一件事。我不能讓我的圖標和文本正確中心對齊每個導航按鈕

CSS

.navbar-default .navbar-nav>.active>a:before, 
.navbar-nav>li>a:before { 
background-repeat: no-repeat; 
background-position: 0 top; 
content: ""; 
height: 40px; 
width: 40px; 
margin-right: 10px; 
vertical-align: top; 
background-color:transparent; 
display:inline-block; 
float:none; 

} 


.navbar-default .navbar-nav>.active>a.home:before, 
.navbar-nav>li>a.dashboard:before { background-image:  url('/VerificationServices/Static/Icons/dashboard.png');} 

.navbar-default .navbar-nav>.active>a.about:before, 
.navbar-nav>li>a.uploadscv:before { background-image:  url('/VerificationServices/Static/Icons/UploadSCV.png'); } 

.navbar-default .navbar-nav>.active>a.contact:before, 
.navbar-nav>li>a.uploaddocs:before { background-image: url('/VerificationServices/Static/Icons/UploadDocs.png'); } 

.navbar-default .navbar-nav>.active>a.contact:before, 
.navbar-nav>li>a.viewrun:before { background-image: url('/VerificationServices/Static/Icons/viewrun.png'); } 

.navbar-default .navbar-nav>.active>a.contact:before, 
.navbar-nav>li>a.selfver:before { background-image: url('/VerificationServices/Static/Icons/selfver.png'); } 


.navbar-default .navbar-nav>.active>a.contact:before, 
.navbar-nav>li>a.selfver:hover { background-image: url('/VerificationServices/Static/Icons/dashboard.png'); }

HTML

<!-- Fixed navbar --> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Norges Idrettshøgskole</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#" class="dashboard">Dashboard</a></li> 
     <li><a href="#about" class="uploadscv">Upload SCV File</a></li> 
     <li><a href="#contact" class="uploaddocs">Upload documents</a></li> 
     <li><a href="#contact" class="viewrun">View run results</a></li> 
     <li><a href="#contact" class="selfver">Self verification</a></li> 


     </ul> 

    </div><!--/.nav-collapse --> 
    </div> 
</div>

來源

2015-03-03 BS Help

Make a Fiddle or a Snippet – 2015-03-03 12:01:15

http://jsfiddle.net/BSHelp/553n0udw/ – 2015-03-03 12:05:01

你的圖標在哪裏？ http://i.imgur.com/RqqMfXV.png – 2015-03-03 12:08:05

這裏是你的更新和工作小提琴：
http://jsfiddle.net/553n0udw/1/Updated Fiddle

我正在使用g lyph-icon，你可以使用任何你需要的東西來爲你定製一個圖標，並給它一個背景網址。遵循自舉圖標規則，這將有很大幫助。

來源

2015-03-03 12:35:28 ami070ipec

在導航圖標css下包裝文本

回答

相關問題