如何將glyphicon添加到引導程序下拉菜單

Question

我試圖在下拉菜單的鏈接左側添加一個圖標，但似乎無法弄清楚。這是我的代碼看起來像：

<div class="col-md-4"> 
    <div class="dropdown"> 
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">options 
      <span class="caret"></span></button> 
      <ul class="dropdown-menu"> 

      <li><i class="glyphicon glyphicon-flag"></i><%=link_to "report link", report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post %></li> 

有人可以請向我解釋如何做到這一點？

謝謝！

Answer 1

只需將圖標放入鏈接中即可 - 這樣做沒有視覺缺陷，甚至可能會提高用戶體驗（也可以單擊圖標）。

<li><a href="#"><i class="glyphicon glyphicon-flag"></i> link</a></li> 

看到這個bootply

所以，你的新的Ruby鏈接看起來像

<%=link_to "<i class='glyphicon glyphicon-flag'></i> report link".html_safe, report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post %> 

（道歉，如果這是錯誤的，我真的不知道紅寶石。我認爲這是一個CSS定位錯誤，但如果紅寶石錯了也讓我知道，我會刪除這個答案）

Answer 2

嘗試使用span以外的link_to。您將刪除link_to之後的顯示文本（「報告鏈接」），並在Glyphicon跨度類結束後將其添加回來。

<li> 
     <%=link_to report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post do %> 
     <span class="glyphicon glyphicon-flag"></span> Report Link 
     <% end %> 
    </li>