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

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

0 голосов
/ 01 июля 2018

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

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

input tag with embedded font-awesome 4.7 icon

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

input tag with fontawesome 5.0

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

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

1 Ответ

0 голосов
/ 01 июля 2018

Включаете ли вы замечательный 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>
...