web-dev-qa-db-ja.com

font-awesomeアイコンをsubmit_tagに埋め込む方法

ボタンに素晴らしいアイコンを使用しようとしていますが、submit_tagに表示できません

 <%= submit_tag icon("search"), class: "btn-primary", style:"width:40px;" %>

出力：

 <input class="btn-primary" name="commit" style="width:40px;" type="submit" value="&lt;i class='icon-search' style='font-size:1em' &gt;&lt;/i&gt;">

ヘルパー：

def icon(name, size=1)
  #icon("camera-retro")
  #<i class="icon-camera-retro"></i> 

  html = "<i class='icon-#{name}' "
  html += "style='font-size:#{size}em' "
  html += "></i>"
  html.html_safe
end

ヘルパーのhtml.html_safe行を削除すると、同じことがわかります。そのようなhtml_safeは機能していません。 html = raw（html）も試しましたが、効果はありませんでした。

ruby-on-rails-3twitter-bootstrap-railsfont-awesome
18
ajbraus

入力送信タグでは、アイコンを表示する必要があるネストされたHTMLは許可されません。

代わりにボタンを使用してみてください。

<button class='btn btn-primary' style='width:40px;'>
  <%= icon("search") %>
</button>

ボタンタグと入力送信タグの動作にはいくつかの違いがあることに注意してください。たくさんの詳細については this SO question 、しかし。

19
BaronVonBraun
<%= link_to(status, :method=>:delete) do %>
   <i class='icon-trash icon-large'></i>
<% end %>
4
sparkle

次のように、HTMLコードにアイコンを追加できます。

<i class="icon-search"></i>

ただし、アイコンをRails link_toヘルパーに配置する場合は、ilink_toヘルパーメソッドを使用します。以下の手順に従います。

1）Gemfileのアセットグループにgemを追加します：gem'less-Rails-fontawesome '

2）bundle installを実行します：

3）app/assets/stylesheetes/bootstrap_and_overrides.css.lessで@ import'fontawesome ';のコメントが解除されていることを確認してください。

4）* link_to *ヘルパーメソッドの代わりに* ilink_to *ヘルパーメソッドを使用します。

<%= ilink_to "upload-alt", "Edit", edit_post_path(post), class: 'btn btn-mini' %>

Obs：リンクテキストの前にアイコン名を削除してicon-プレフィックスを付けます

これらの手順は次のとおりです： https://github.com/wbzyl/less-Rails-fontawesome

2
Duany Dreyton

ヘルパーから_html_safe_を取り除き、raw icon("search")だけでなくicon("search")を使用する必要があると思います。

そしてBaronVonBraunが言うように-_input[submit]_ではなくbuttonを使用してください

1
EnergyNumbers