Dodawanie ikon do rozwijanego menu startowego

Question

Próbuję dodać kilka ikon do rozwijanego menu początkowego (zobacz skrzypce poniżej) jak widać, ikona jest dodawana, ale popycha mężczyznę w prawo i element menu nie jest już wyrównany z innymi elementami.

Jaki jest odpowiedni sposób na zrobienie tego?

js fiddle

<div class="pull-left"> 
<div class="pull-right"> 
    <div class="btn-group">     
      <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#"> 
       <span>Actions</span> 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#"><i class="icon-ok"></i>Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
       <li><a href="#">Item 3</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Item 4</a></li> 
       <li><a href="#">Item 5</a></li> 

      </ul> 
     </div> 
</div> 

Answer 1

będzie to działać. Niestety wydaje się, że musisz użyć !important na obrazie tła, który zazwyczaj najlepiej jest unikać. Uwaga, nth-of-type nie jest obsługiwany w niektórych starszych przeglądarkach.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

/* First Menu Item */ 
.dropdown-menu li:nth-of-type(1) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat; 
    background-size: 16px 16px; 
    background-position: 3px 5px; 
    padding-left: 5px; 
} 

/* Second Menu Item */ 
.dropdown-menu li:nth-of-type(2) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat; 
    background-size: 16px 16px; 
    background-position: 3px 5px; 
    padding-left: 5px; 
} 

JS Fiddle: http://jsfiddle.net/syVk8/

EDIT: Ok, po trochę wyjaśnień okazuje się, że nie chcesz tekst przesuwa się w ogóle. Tutaj jest podobny przykład bez wyściółki na lewo i klasy o nazwie „ok”, które można zastosować do różnych elementów menu, aby dodać pole (lub cokolwiek może być ikona):

li.ok { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat; 
    background-size: 16px 16px; 
    background-position: 3px 5px; 
} 

JS Fiddle: http://jsfiddle.net/syVk8/2/

Answer 2

Oto jak zrobiłem to w Bootstrap 3.x:

Markup:

<ul class="dropdown-menu"> 
    <li><a href="#" class="icon"><span 
     class="glyphicon glyphicon-user"></span>User Profile</a></li> 
    <li><a href="#">Log Out</a></li> 
</ul> 

CSS:

.dropdown-menu a.icon { 
    position: relative; 
    padding-left: 40px; 
} 
.dropdown-menu a.icon .glyphicon { 
    top: 6px; 
    left: 10px; 
    font-size: 18px; 
} 

Kluczem jest to, że glyphicons są absolutne położenie, i mimo że są one „zawarty” wewnątrz <a> w znacznikach, pozycjonowanie jest w stosunku do całego menu przez domyślna. Dodając klasę .icon do każdej kotwicy menu, która zawiera ikonę, umożliwia ona pozycjonowanie względem tej kotwicy, a także umieszczenie tekstu zakotwiczenia w miejscu, w którym ikona ma odpowiednią widoczność. Jak widać powyżej, wszelkie elementy menu, które nie zawierają klasy .icon lub glify, będą wyświetlane normalnie jako łącze tekstowe.

Jeśli pierwotnym pytaniem było zawsze wyrównanie tekstu w pionie, wystarczy przesunąć wypełnienie na .dropdown-menu a.