如何将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>