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

Question

У меня есть следующий 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>

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

Я нахожусь в процессе обновления моего использования 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>

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

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

Answer 1

Вы включаете 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>