ブートストラップにアイコンを追加メニュー項目をドロップする

Question

アイコンが追加されるのを見ることができるので、ブートストラップのドロップダウンメニュー（下記のフィドル参照）にいくつかのアイコンを追加しようとしていますが、メニュー項目がもう他の項目と整列していません。

これを行う適切な方法は何ですか？

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

これは動作します。残念ながら、通常は回避しようとするのが最も良い背景画像に!importantを使用する必要があるようです。 nth-of-typeは一部の古いブラウザではサポートされていないことに注意してください。

@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フィドル：http://jsfiddle.net/syVk8/

EDIT：[OK]を、それは結局のところ少し明確化した後、あなたはテキストがすべてでオーバーシフトする必要はありません。

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フィドル：ここでは、チェックボックスを追加するために、別のメニュー項目に適用することができます（または任意のあなたのアイコンがあるかもしれない）、左側の無パディングと「OK」と呼ばれるクラスと同様の例があるhttp://jsfiddle.net/syVk8/2/ここで

Answer 2

は、私はブートストラップ3.xのでこれをやった方法は次のとおりです。

マークアップ：

<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; 
} 

キーはglyphiconsが絶対位置決めされ、そしてそれらは、マークアップで<a>内部に「含まれる」であっても、位置決めメニュー全体によりに対して相対的であるということですデフォルト。アイコンを含む各メニューアンカーに.iconクラスを追加することで、そのアンカーとの相対的な位置付けを行い、アイコンが正しく表示されるようにアンカーテキストを埋め込むことができます。上記のように、.iconクラスまたはグリフコンを含まないメニュー項目は通常、テキストリンクとして表示されます。

元の質問の意図がテキストを常に垂直方向のアイコンに合わせることだった場合は、埋め込みを.dropdown-menu aに移動してください。