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
Reply
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.
Reply

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>

Reply
Join the discussion
Create an account Log in

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

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

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.