使用font-awesome-rails与HAML文件时遇到问题

Question

I am currently trying to change from an existing svg file in the following section of a HAML file:

.pokecon-btn-search-lg
   %i.btn.w100= image_tag "icons/search_white.svg", class: "pokecon-img-icon-search"
   %input.pokecon-btn-search-lg-submit{type: "submit", value: ""}

The goal is to switch over to the font-awesome search icon which is usually called into HTML by

<i class="fa fa-search" aria-hidden="true"></i>

The gem font-awesome-rails is installed, and called into application.css.scss via @import "font-awesome";

In order to start get the line into the HAML file, I was advised to create an image helper like so:

module  ImagesHelper
  def fa(name)
    return "<i class='fa #{name}' aria-hidden='true'></i>"
  end
end

This allowed me to change the HAML file into:

%i.btn.w100
  = fa 'fa-search pokecon-img-icon-search'
  %input.pokecon-btn-search-lg-submit{type: "submit", value: ""}

Unfortunately, this is just rendering the text <i class="fa fa-search pokecon-img-icon-search" aria-hidden="true"></i> on top of the button instead of the actual icon that is needed. I have tried restarting the rails server and running bundle install again just in case, but the issue persists.

I am not super confident with HAML files so I would not be surprised if I am heading in completely the wrong direction with things here!

Answer 1

Try it without the helper first, then work out how to get the HAML into the helper method later.

This ought to work:

%i.btn.w100
  .fa.fa-search.pokecon-img-icon-search{ "aria-hidden" => true }
  %input.pokecon-btn-search-lg-submit{ type: "submit", value: "" }

Answer 2

The string being returned by your helper isn't marked as html_safe you can fix this by using:

return "<i class='fa #{name}' aria-hidden='true'></i>".html_safe

but, then if name can be modified by a user they can inject whatever they want into that string. (Try calling it with <%= fa('\\'"><script>alert("Hello");</script>') %> ) Instead I would do something like

content_tag :i, '', 'class' => ['fa', name], 'aria-hidden' => true