将 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

为了开始将行放入 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

先在没有 helper 的情况下尝试，然后再研究如何将 HAML 放入 helper 方法中。

这应该有效：

%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

将 font-awesome-rails 与 HAML 文件一起使用时出现问题

Trouble using font-awesome-rails with a HAML file

ruby-on-rails

rubygems

frontend

haml

font-awesome