Шрифт Awesome5 с вводом заполнителя - PullRequest
Новая
       7

Шрифт Awesome5 с вводом заполнителя

0 голосов
/ 24 мая 2018

Я хочу добавить значок FontAwesome для ввода заполнителя.

Поэтому я попытался написать такой код.

[html]

<input type="text" placeholder="&#xF167;"/>

[css]

font-family:'Font Awesome 5 Brands' !important

Работает нормально.Значок YouTube находится во входном теге.

enter image description here

Но когда я добавляю значок поиска (placeholder="&#xF002;") в заполнитель, он не работает должным образом.

enter image description here

В чем проблема моего кода?

Шрифт - потрясающая шпаргалка здесь -> https://fontawesome.com/cheatsheet

Спасибо.

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

Установите font-family, как показано ниже, но также установите font-weight в соответствии с тем, какой стиль вы хотите загрузить.Для Solid font-weight будет 900. 

input {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

Вот рабочий CodePen для демонстрации.

Это требует, чтобы вы загружались правильноШрифт Awesome 5, и он будет работать только в веб-шрифтах с методом CSS .В примере CodePen загружается только Font Awesome Free Solid.

Вот ссылка , показывающая вес шрифта, связанный с каждым стилем Font Awesome.

0 голосов
/ 31 марта 2019

Вы можете загрузить все замечательные библиотеки с помощью: 

href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384- 
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
crossorigin="anonymous">```
0 голосов
/ 24 мая 2018

Шрифт Awesome 5 разбивает иконки на разные семейства.

Есть Solid, Brands и Regular.Значок поиска представляет собой шрифт Solid или Regular.Так что вам нужно использовать font-family: Font Awesome 5 Free;

...