ruby on rails 3 - text_field_tag - Cómo incrustar iconos de fuentes impresionantes en submit_tag

text_field_tag bootstrap

Question

Intento usar iconos impresionantes de fuentes para mis botones, pero no consigo que se muestren en la etiqueta submit_tag

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

salida:

 <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;">

ayudante:

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

cuando elimino la línea html.html_safe del ayudante, obtengo lo mismo. Es como html_safe no está funcionando. También he probado html = raw (html) sin ningún efecto.

Answer 1

Creo que necesitarás deshacerte de html_safe del ayudante y usar raw icon("search") html_safe raw icon("search") lugar de solo el icon("search")

y como dice BaronVonBraun: use el button lugar de la input[submit]

Answer 2

Las etiquetas de envío de entrada no permiten HTML anidado, que debe mostrar un icono.

Intente usar un botón en su lugar:

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

Vale la pena señalar algunas diferencias entre el comportamiento de las etiquetas de botones y las etiquetas de envío de entrada. Echa un vistazo a esta pregunta SO para un montón de grandes detalles. Personalmente no he tenido problemas con las etiquetas de botones en mis aplicaciones. YMMV con respecto a diferentes navegadores y similares, sin embargo.

Answer 3

Puedes agregar íconos a tu código HTML, así:

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

Sin embargo, si desea colocar íconos en Rails link_to helper, use el método ilink_to helper. Siga los pasos a continuación:

1) Agregue la gema a su grupo de activos en el Gemfile: gema ''less-rails-fontawesome''

2) Ejecutar paquete de instalación :

3) Asegúrese de que @import ''fontawesome''; no está comentado en app / asset / stylesheetes / bootstrap_and_overrides.css.less.

4) Use el método * ilink_to * helper en lugar del método * link_to * helper.

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

Obs: preceda el texto del enlace con el nombre del icono borrado prefijo de icono

Estas instrucciones están aquí: https://github.com/wbzyl/less-rails-fontawesome

Answer 4

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