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

Ask A Question

Notifications

You’re not receiving notifications from this thread.

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

Rodrigo Barreto asked in Rails
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>
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 37,629+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.