У меня есть немного CSS, который выглядит так:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
Я хотел бы заменить изображение на иконку из Font Awesome .
Я не вижу в любом случае использовать значок в CSS в качестве фонового изображения. Возможно ли это сделать, предполагая, что таблицы стилей / шрифты Font Awesome загружены до моего CSS?
css
font-awesome
L84
источник
источник
Ответы:
Вы не можете использовать текст в качестве фонового изображения, но вы можете использовать
:before
или:after
псевдо-классы, чтобы разместить текстовый символ там, где вы хотите, без необходимости добавлять все виды грязной дополнительной разметки.Не забудьте установить
position:relative
на ваш фактический текстовый упаковщик для позиционирования для работы.РЕДАКТИРОВАТЬ:
Font Awesome v5 использует имена других шрифтов, чем старые версии:
font-family: "Font Awesome 5 Free"
font-family: "Font Awesome 5 Pro"
Обратите внимание, что вы также должны установить то же свойство font-weight (кажется, оно равно 900).
Другой способ найти имя шрифта - щелкнуть правой кнопкой мыши по удивительному значку образца шрифта на своей странице и получить имя шрифта (так же, как можно найти код значка utf-8, но обратите внимание, что вы можете найти его на
:before
).источник
font-size
..backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
В дополнение к ответу от Diodeus выше, вам нужно
font-family: FontAwesome
правило (при условии, что у вас уже есть@font-face
правило для FontAwesome, объявленное в вашем CSS). Тогда нужно знать, какое значение CSS-содержимого соответствует какому значку.Я перечислил их все здесь: http://astronautweb.co/snippet/font-awesome/
источник
На самом деле даже
font-awesome
CSS имеет похожую стратегию для установки своих стилей иконок. Если вы хотите быстро овладетьicon
кодом , проверьтеnon-minified font-awesome.css
файл, и вот они ... каждый шрифт в своей чистоте.источник
Подводя итог всему вышесказанному, следующий класс, который работает хорошо
источник
Вы можете попробовать этот пример класса. и найти значок содержимого здесь: http://astronautweb.co/snippet/font-awesome/
источник
Чтобы использовать шрифт Awesome с помощью CSS, выполните следующие действия:
шаг 1 - добавление шрифтов FontAwesome в CSS
Шаг - 2 Используйте ниже CSS, чтобы применить шрифт к элементу класса HTML
И наконец, используйте класс sorting_asc, чтобы применить CSS к желаемому тегу / элементу HTML.
источник
Не нужно встраивать контент в CSS. Вы можете поместить содержимое значка в элемент fa, а затем настроить значок css. http://jsfiddle.net/vmjwayrk/2/
источник
В качестве альтернативы, если вы используете Sass, можно «расширить» значки FA для их отображения:
источник
Пример ссылки: https://codepen.io/bungeedesign/pen/XqeLQg
Получить код значка с: https://fontawesome.com/cheatsheet?from=io
источник
Для этого вам просто нужно добавить
content
атрибут иfont-family
атрибут к требуемому элементу через: before или: after, где это применимо.Например: я хотел прикрепить значок вложения после всех
a
элементов в моем сообщении. Итак, сначала мне нужно найти, существует ли такая иконка в fontawesome. Как и в случае , если я нашел его здесь , то естьfa fa-paperclip
. Затем я бы щелкнул правой кнопкой мыши по значку и выбрал::before
псевдо-свойство, чтобы извлечьcontent
тег, который он использует, что в моем случае оказалось\f0c6
. Тогда я бы использовал это в моем CSS так:источник
Используйте следующую программу Python через командную строку для создания изображений png из значков Font-Awesome:
https://github.com/Pythonity/font-awesome-to-png
источник