CODEWITHSUNDEEP
htmlcss
user3089480
user3089480

Reputation: 101

Set Font awesome and Input the same height HTML, CSS

Is there a way to make both font awesome symbol and input tag the same height? Look like this:enter image description here
I want to use this HTML:

<p>
  <span class="fa fa-user fa-fw"></span>
  <span>
    <input type="text" placeholder="Your name">
  </span>
</p>

And my CSS code:

input, span.fa {
  height: 46px;
}

span.fa {
  border: 1px solid red;
  background-color: #ccc;
}


Here is my jsfiddle: https://jsfiddle.net/sLs1je66/ Thank you!

Upvotes: 0

Views: 923

Answers (4)

Head In Cloud
Head In Cloud

Reputation: 2051

Yes you can do this

input, span.fa {
    height: 46px;
    border: 1px solid #ccc;
    padding: 1px 13px;
}

input{
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

span.fa {
    background-color: #e4e3e3;
    display: inline-block;
    float: left;
    line-height: 50px;
    border-right: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    color: #555;
}

Click here for demo

Upvotes: 1

W. Bilel
W. Bilel

Reputation: 291

Use <i> tag here:

<p>
    <span>
        <i class="fa fa-user fa-fw"></i>
        <input type="text" placeholder="Your name">
    </span>
</p>

Upvotes: 0

Vucko
Vucko

Reputation: 20844

Just use the box-sizing: border-box property and vertical-aling: top to align them correctly:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
input,
span.fa {
  height: 46px;
  vertical-align: top;
}
span.fa {
  border: 1px solid red;
  background-color: #ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
  <span class="fa fa-user fa-fw"></span>
  <input type="text" placeholder="Your name">
</p>

JSFiddle

Update - adding styles to the elements and some markup change, to look like in the image:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

p{
  display: inline-block;
  border-radius: 5px;
  border: 1px solid grey;
  overflow: hidden;
  background-color: white;
}

input{
  border: 0;
  outline: none;
  padding: 10px;
}

span{
  display: inline-block;
  padding: 10px;
  border-right: 1px solid grey;
  text-align: center;
  background-color: #eee;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
<span><i class="fa fa-user fa-fw"></i></span><input type="text" placeholder="Your name">
</p>

JSFiddle

Upvotes: 0

Govind Samrow
Govind Samrow

Reputation: 10187

I've create a fiddle , have a look:

http://jsfiddle.net/ersamrow/gA4rx/1191/

.wrapper input[type="text"] {
    position: relative; 
}

input { 
font-size: 22px;
    font-family: 'FontAwesome';
    padding-left: 35px;
    line-height: 32px;
} /* This is for the placeholder */

.wrapper:before {
font-family: 'FontAwesome';
    color: black;
    position: relative;
    left: 32px;
    content: "\f007";
    font-size: 20px;
    background-color: #ddd;
    padding: 7px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<p class="wrapper"><input placeholder="Full Name"/></p>

Upvotes: 0

Related Questions