Font Awesome 5 обработка встроенных значков в полях ввода формы — форматирование выключено по сравнению с V4.7

У меня есть следующий html / php код в шаблоне лезвия laravel, который отображает шрифт 4.7 в поле ввода:

<div class="form-group col-md-12">
{!! Form::text('locName', old('locName'),
$attributes = array('class'=>'form-control has-feedback-left', 'maxlength' => '50', 'id'=>'locName', 'placeholder'=>'Location Name', 'required')) !!}
<span class="fa fa-building form-control-feedback left" aria-hidden="true"></span>
</div>

который выглядит следующим образом:

тег ввода со встроенным шрифтом 4.7

Я нахожусь в процессе обновления моего использования FA 4.7 до 5Pro, и когда я изменяю это следующим образом (код ниже), форматирование не совсем то же самое.

<div class="form-group col-md-12">
{!! Form::text('locName', old('locName'),
$attributes = array('class'=>'form-control has-feedback-left', 'maxlength' => '50', 'id'=>'locName', 'placeholder'=>'Location Name', 'required')) !!}
<span class="far fa-building fa-fw form-control-feedback fa-pull-left" aria-hidden="true"></span>
</div>

Вышеуказанный PHP как HTML:

<div class="form-group col-md-12">
<input class="form-control has-feedback-left" maxlength="50" id="locName" placeholder="Location Name" required name="locName" type="text">
<span class="far fa-building fa-fw form-control-feedback fa-pull-left" aria-hidden="true"></span>
</div>

входной тег с Fontawesome 5.0

Я не смог найти соответствующий пример 5.0, который подробно описывает это, и я не верю, что какой-либо из существующих вопросов FA (5) покрывает это.

И да, включены ссылки на css и js pro.

0

Решение

Вы включаете Fontawesome CSS? Я получил значок, чтобы показать с помощью 5.0

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">


<div class="form-group col-md-12">
{!! Form::text('locName', old('locName'),
$attributes = array('class'=>'form-control has-feedback-left', 'maxlength' => '50', 'id'=>'locName', 'placeholder'=>'Location Name', 'required')) !!}
<span class="far fa-building fa-fw form-control-feedback fa-pull-left" aria-hidden="true"></span>
</div>
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]