Используйте значок Font Awesome (5) во вводимом тексте-заполнителе - PullRequest
Новая
       17

Используйте значок Font Awesome (5) во вводимом тексте-заполнителе

0 голосов
/ 27 апреля 2018

Я сталкивался со многими способами, чтобы решить эту проблему, используя Font Awesome <5, но, похоже, я никак не могу решить эту проблему, используя Font Awesome 5. </p>

Сколько ресурсов указывают на добавление значка Font Awesome в заполнитель текста. 

<input style="font-family:FontAwesome !important" type="text" placeholder="&#xf167">

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Вы также можете fast класс для ввода.

Имейте в виду, что это решение и любые отличные от шрифта решения по изменению стиля также изменят стиль любого текста, предшествующего или следующего за значком Юникода.

0 голосов
/ 27 апреля 2018

Помните, что не следует использовать общее семейство шрифтов "Font Awesome 5", вам необходимо специально указать ветку значков, с которыми вы работаете. Здесь я работаю в категории "Бренды". 

<input style="font-family:'Font Awesome 5 Brands' !important" type="text" placeholder="&#xf167">

Для более изощренного решения вы могли бы реализовать класс, который работает конкретно с заполнителем текста такого класса, и добавить этот класс к вашему вводу. Полезно, если вам нужно другое семейство шрифтов для ваших входных значений. 

.useFontAwesomeFamily::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-ms-input-placeholder { /* Microsoft Edge */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::placeholder { /* Most modern browsers */
    font-family: "Font Awesome 5 Brands" !important;
}

А затем добавьте этот класс в свой тег. 

<input class="useFontAwesomeFamily" type="text" placeholder="&#xf167;">
...