Не удается выровнять текстовый ввод с удивительными значками рядом с ними

Question

Я пытаюсь выровнять 2 текста ввода, которые имеют удивительный значок рядом с ними.

<span i class="fa fa-link fa-lg"> 
    <input id="product" type="text" placeholder="Product" required/>    
</span> 
<br><br> 
<span i class="fa fa-desktop fa-lg"> 
    <input id="desktop" type="text" placeholder="Desktop" required/>    
</span> 

Я хотел бы иметь входы выравнивание по левому краю, независимо от ширины значка.

Answer 1

Использование fa-fw шрифт-удивительный служебный класс.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<span> 
 
<i class="fa fa-link fa-fw fa-lg"></i> 
 
<input id="product" type="text" placeholder="Product" required/>    
 
</span> 
 
<br> 
 
<br> 
 
<span> 
 
<i class="fa fa-desktop fa-fw fa-lg"></i> 
 
<input id="desktop" type="text" placeholder="Desktop" required/>    
 
</span>

Answer 2

Вы должны сделать значки отдельным элементом отдельно, чтобы они могли образовать элемент блока с фиксированной шириной.

либо структура должна быть следующим:

<span> 
    <i class="fa fa-link fa-lg"></i> 
    <input id="product" type="text" placeholder="Product" required/>    
</span> 
<br><br> 
<span> 
    <i class="fa fa-desktop fa-lg"></i> 
    <input id="desktop" type="text" placeholder="Desktop" required/>    
</span> 

И дает фиксированную ширину шрифта по удивительной иконке:

i { 
    width: 20px; 
} 

Answer 3

В настоящее время, ваш HTML является недействительным.

Обязательно используйте класс fontavesome fa-fw, чтобы применить фиксированную ширину к значку. (Фиксированная ширина, как указано в документации: http://fontawesome.io/examples/#fixed-width)

Попробуйте следующий код (как в пример: https://jsfiddle.net/0vwfp6e2/1/):

<label> 
    <i class="fa fa-link fa-lg fa-fw"></i> 
    <input id="product" type="text" placeholder="Product" required/> 
</label> 

<label> 
    <i class="fa fa-desktop fa-lg fa-fw"></i> 
    <input id="desktop" type="text" placeholder="Desktop" required/> 
</label>