CODEWITHSUNDEEP
ruby-on-railszurb-foundationfont-awesome
smanvi12
smanvi12

Reputation: 581

Icon inside text_field_tag (foundation-rails)

I am using foundation-rails to create a signup form. Inside a div : 

<%= text_field_tag "password", "", placeholder: password", class:"password", required: true, type: "password" %>
<small class="error">Invalid</small>

I want to have a "show password" or an icon inside this field(on the right side), on click of which the password should be shown.

How to put a font awesome icon inside a text_field_tag???

Upvotes: 0

Views: 1634

Answers (1)

Michael Malov
Michael Malov

Reputation: 1887

<div class="password">
    <span class="fa fa-eye"></span>
    <%= text_field_tag "password", "", placeholder: password", class:"password", required: true, type: "password" %>
</div>

Add to css

.password {
    position: relative;
}

.password input { text-indent: 32px;}

.password .fa-eye { 
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

Add js script

<script>
    $('.password').find('.fa-eye').click(function(){
        $('#password').prop("type", "text");
    })
</script>

Upvotes: 1

Related Questions