CODEWITHSUNDEEP
htmlcssfont-awesome
Miyagi
Miyagi

Reputation: 127

Adding a fontawesome icon with border into form input

is there any way to achieve something like this:

enter image description here

I've tried options that I found here in stack (with using span) but even if i made it work it is impossible for me to do that white line on the right from icon, can someone help me?

My current code looks like that:

                    <form>
                    <input type="text" name="firstname" placeholder="Name">
                    <input type="text" name="firstname" placeholder="e-mail">
                    <input type="text" name="firstname" placeholder="website">
                </form>

I've also tried adding that icon in container with borders to achieve effect:

<form>
                    <span class="form_frame"><i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    </span>
                    <input type="text" name="firstname" placeholder="Name">

And css:

.form_frame {
height: 60px;
border-width: 1px solid;
border-color: white;
width: 100%;
    background-color: #2b2b2b;

But no succes

Thank's for any help.

Upvotes: 1

Views: 699

Answers (2)

maiky_forrester
maiky_forrester

Reputation: 608

You can use Labels I thinks this is a good start.

    .wr{border:2px solid black;padding:12px;}    
    <form>
        <diV class="wr">
      <label for="user"> <i class="fa fa-camera-retro">(icon_img)</i></label><input type="text" name="user" placeholder="Username"/>  </diV>
       <div class="wr">
       <label for="pass"> <i class="fa fa-futbol-o">(icon_img)</i></label><input type="password" name="password" placeholder="Password"/>   </div>
    </form>

Upvotes: 1

Naomi
Naomi

Reputation: 1298

Add the icon and the input inside a span. You can then add a border to the whole span if you want to our you can put a border on just the icon or input box. 

.fa-address-book-o {
border: solid;
border-color: red;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<span><i class="fa fa-address-book-o" aria-hidden="true"></i><input type="text"/></span>

Upvotes: 4

Related Questions