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

Question

我目前正在尝试从HAML文件以下部分中的现有svg文件进行更改：

.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: ""}

目的是切换到超棒的搜索图标，通常通过以下方式将其称为HTML

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

gem font-awesome-rails已安装，并通过@import "font-awesome";调用到application.css.scss @import "font-awesome";

为了开始将该行放入HAML文件，建议我创建一个图像帮助器，如下所示：

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

这使我可以将HAML文件更改为：

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

不幸的是，这只是在按钮顶部而不是所需的实际图标上呈现文本<i class="fa fa-search pokecon-img-icon-search" aria-hidden="true"></i> 。 我试图重新启动Rails服务器并再次运行捆绑安装，以防万一，但是问题仍然存在。

我对HAML文件不是很自信，所以如果我对这里的事情完全走错了方向，我不会感到惊讶！

Answer 1

首先在没有帮助程序的情况下进行尝试，然后再找出如何将HAML放入帮助程序方法。

这应该起作用：

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

Answer 2

您的帮助程序返回的字符串未标记为html_safe您可以使用以下方法解决此问题：

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

但是，如果用户可以修改name ，则可以将所需的内容注入该字符串中。 （尝试使用<%= fa('\\'"><script>alert("Hello");</script>') %>调用它）相反，我会做类似的事情

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