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

Я нашел много способов решить эту проблему с помощью Font Awesome ‹ 5, но я никак не могу решить эту проблему с помощью Font Awesome 5.

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

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

input placeholder font-awesome font-awesome-5
person Thomas Lindauer    schedule 26.04.2018    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Помните, что нельзя использовать общее семейство шрифтов «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;">
person Thomas Lindauer    schedule 27.04.2018

arrow_upward
3
arrow_downward

Это может помочь кому-то там, поскольку у меня была такая же проблема.

Ветка для обычных значков — это Font Awesome 5 Free. Однако, если вам нужно использовать сплошные значки, просто добавьте свойство font-weight: 900; во встроенный CSS.

<style="font-family: Circular, 'Font Awesome 5 Free' !important; font-weight: 900;">

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

Я надеюсь, что это помогает.

person Brayam Valero    schedule 25.09.2019

arrow_upward
1
arrow_downward

Вы также можете использовать класс на входе.

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

person NastyStyles    schedule 20.09.2018
comment
Пожалуйста, опубликуйте пример с ним - person saAction; 21.09.2018
comment
@saAction <input class="fas fa-search" type="text" name="search" placeholder="&#xf002; Search..."> - person agorf; 26.02.2019

arrow_upward
0
arrow_downward

Не забудьте добавить к входным данным класс fas fa-search.

person Apoorva    schedule 04.07.2020