Thêm biểu tượng vào các mục trình đơn thả xuống bootstrap

Question

Tôi đang cố gắng thêm một số biểu tượng vào menu thả xuống của bootstrap (xem phần dưới) vì bạn có thể thấy biểu tượng được thêm vào, nhưng nó đẩy người đàn ông u sang bên phải và mục menu không được căn chỉnh với các mục khác nữa.

Cách thích hợp để thực hiện việc này là gì?

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

này sẽ làm việc. Rất tiếc, có vẻ như bạn cần sử dụng !important trên hình nền thường tốt nhất để tránh. Lưu ý, nth-of-type không được hỗ trợ trong một số trình duyệt cũ hơn.

@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, sau khi làm rõ chút nó quay ra bạn không muốn các văn bản chuyển qua tại tất cả. Dưới đây là một ví dụ tương tự không có đệm ở bên trái và một lớp được gọi là 'ok' mà bạn có thể áp dụng cho các mục menu khác nhau để thêm vào hộp kiểm (hoặc bất kỳ biểu tượng của bạn có thể):

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

đây là cách tôi đã làm điều này trong 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; 
} 

Điều quan trọng là glyphicons là tuyệt đối vị trí, và mặc dù họ đang "chứa" bên trong <a> trong đánh dấu, định vị là liên quan đến toàn bộ menu bằng mặc định. Bằng cách thêm lớp .icon vào mỗi thanh menu có chứa một biểu tượng, nó cho phép bạn thực hiện định vị liên quan đến neo đó, và cũng có thể thả neo văn bản sao cho biểu tượng có chỗ để hiển thị chính xác. Như bạn có thể thấy ở trên, bất kỳ mục trình đơn nào không chứa lớp .icon hoặc biểu tượng glyphicon sẽ hiển thị bình thường dưới dạng liên kết văn bản.

Nếu ý định trong câu hỏi ban đầu là luôn luôn có văn bản căn chỉnh theo chiều dọc biểu tượng hay không, chỉ cần di chuyển phần đệm sang .dropdown-menu a.