Icon within a link_to tag with <a> tags

Question

I have a navbar button:

<%= link_to new_post_path do %>
  <a class="btn-navbar"><i class="fa fa-plus" aria-hidden="true"></i></a>
<% end %>

It does not allow me to click it and navigate to the correct page.

If I remove the <a> tags, it works but I need the <a> because its have the correct class associated with it to style the button.

The above code is styled correctly but when trying to click it it does not link to the right page.

Answer 1

Add the class to the link to helper to have it applied to the a tag.

<%= link_to new_post_path, class: 'btn-navbar' do %>
  <i class="fa fa-plus" aria-hidden="true"></i>
<% end %>

If you're using the official font-awesome rails gem:

https://github.com/FortAwesome/font-awesome-sass

<%= link_to icon('plus'), new_post_path, class: 'btn-navbar' %>

Answer 2

用span替换标签，然后为span赋予与给tag相同的类，这应该给您相同的结果

<span class="btn-navbar">your code goes here</span>