Rahmen um Symbol vergrößern

Question

Gibt es eine Möglichkeit, diese Grenze auf 60px (wie Eingabe) zu vergrößern?

https://jsfiddle.net/p5b171tg/1/

HTML:

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

CSS:

input[type=text] { 
    height: 60px; 
    border-width: 1px solid; 
    border-color: white; 
    background-color: #2b2b2b; 
    width: 90%; 
} 

.fa-user-circle-o{ 
    padding-top:60px; 
    color: white; 
} 

.frejm{ 
    background-color: #2b2b2b; 
    border-width: 2px; 
    border-style: solid; 
    border-color: red; 
} 

Answer 1

input[type=text] { 
 
    height: 60px; 
 
    border-width: 1px solid; 
 
    border-color: white; 
 
    background-color: #2b2b2b; 
 
    flex: 100; 
 
} 
 

 
.frejm { 
 
    background-color: #2b2b2b; 
 
    border-width: 2px; 
 
    border-style: solid; 
 
    border-color: red; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.fa-user-circle-o { 
 
    color: white; 
 
    font-size: 60px !important; 
 
}

<script src="https://use.fontawesome.com/19445204e2.js"></script> 
 
<form> 
 
    <span class="frejm"> 
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
 
    <input type="text" name="firstname" placeholder="Name"> 
 
    </span> 
 
</form>

Answer 2

Ich denke, dies ist der Trick:

.frejm { 
    overflow: hidden; 
    padding: 24px 0; 
    background-color: #2b2b2b; 
    border-width: 2px; 
    border-style: solid; 
    border-color: red; 
    margin-top: 2px; 
} 

input[type=text] { 
    height: 60px; 
    border: none; 
    border-color: white; 
    background-color: #2b2b2b; 
    width: 90%; 
}