Skip to main content

How do i put Icon inside a text_field usind Rails and Slim

Rails • Asked by Rodrigo Barreto
I'm new to Rails and even more to Slim. I need to put an Icon (i'm using Fontawesome icon) inside a f.text_field, but have no idea how.

My code has:

    i.fa.fa-user.fa-2x
    =f.text_field :name , placeholder: "Nome",class: "form-control"

The goal is to put the icon inside de text_field on the left side.
Anyone can help me? Thanks, and sorry for my bad english

It's not possible to add html element (like a `<i />`) inside of an `<input />` field. You could add/move it before the input field, so it looks visually more to what you are aiming for.

Here is how I achieved the same effect using bootstrap 3. There is a div for each icon essentially. For font-awesome, you would just need to use the i class in the div. Hope that helps. 

<div class="input-group">
<div class="input-group-addon">€</div>
<%= f.text_field :field, class: 'form-control' %>
<div class="input-group-addon">.00</div>
</div>

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 27,623+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.