Вы не можете использовать текст в качестве фонового изображения, но вы можете использовать :before
или :after
псевдо-классы, чтобы разместить текстовый символ там, где вы хотите, без необходимости добавлять все виды грязной дополнительной разметки.
Не забудьте установить position:relative
на ваш фактический текстовый упаковщик для позиционирования для работы.
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
РЕДАКТИРОВАТЬ:
Font Awesome v5 использует имена других шрифтов, чем старые версии:
- Для бесплатной версии FontAwesome v5 используйте:
font-family: "Font Awesome 5 Free"
- Для версии FontAwesome v5 Pro используйте:
font-family: "Font Awesome 5 Pro"
Обратите внимание, что вы также должны установить то же свойство font-weight (кажется, оно равно 900).
Другой способ найти имя шрифта - щелкнуть правой кнопкой мыши по удивительному значку образца шрифта на своей странице и получить имя шрифта (так же, как можно найти код значка utf-8, но обратите внимание, что вы можете найти его на :before
).