how to add glyphicon to bootstrap dropdown menu - css

Question

Im trying to add a glyphicon to the left of a link in a dropdown menu, but cant seem to figure it out. This is what my code looks like:
<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>
Can someone please explain to me how to do this?
Thanks!

Answer 1

Simply put the icon inside the link - there's no visual downside to doing so, and even potentially improves UX (you can click on the icon too).
<li><i class="glyphicon glyphicon-flag"></i> link</li>
See this bootply
So your new ruby link would look like
<%=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 %>
(Apologies if this is wrong, I don't actually know Ruby. I assume this was a css positioning error, but if the Ruby is wrong too let me know and I shall delete this answer)

Answer 2

Try using a span outside of your link_to. You would remove the display text ("report link") after the link_to and add it back after the Glyphicon span class ends.
<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>