Я хочу использовать значок Font Awesome в качестве содержимого CSS, т.е.
a:before {
content: "<i class='fa...'>...</i>";
}
Я знаю, что не могу использовать HTML-код content
, так что остались только изображения?
html
css
font-awesome
sdvnksv
источник
источник
Ответы:
Обновление для FontAwesome 5 Благодаря Aurelien
Вам нужно изменить
font-family
наFont Awesome 5 Brands
ORFont Awesome 5 Free
, основываясь на типе значок , который вы пытаетесь визуализировать. Также не забудьте объявитьfont-weight: 900;
демонстрация
Вы можете прочитать остальную часть ответа ниже, чтобы понять, как он работает, и узнать некоторые обходные пути для расстояния между значком и текстом.
FontAwesome 4 и ниже
Это неправильный способ его использования. Откройте потрясающую таблицу стилей шрифта, перейдите к
class
шрифту, который вы хотите использовать, скажемfa-phone
, скопируйте свойство содержимого этого класса вместе с сущностью и используйте его следующим образом:демонстрация
Просто убедитесь, что, если вы ищете целевой
a
тег, рассмотрите возможность использованияclass
вместо него, чтобы сделать его более конкретным, например:При использовании вышеописанного способа значок будет прикреплен к оставшемуся вашему тексту, поэтому, если вы хотите, чтобы между ними было немного свободного пространства, сделайте его
display: inline-block;
и используйте немногоpadding-right
:Расширяя этот ответ далее, поскольку у многих может возникнуть необходимость изменить значок при наведении, поэтому для этого мы можем написать отдельный селектор и правила для
:hover
действий:демонстрация
Теперь в приведенном выше примере значок подталкивает из-за разного размера, и вы, конечно, не хотите этого, поэтому вы можете установить фиксированное
width
значение для базового объявления, напримердемонстрация
источник
font-family: FontAwesome;
его помощью также изменяется шрифт для тегов привязки. Как мы можем справиться с этим?font-family
предполагается , что он вызывается на:before
псевдо-теге, а не на привязанном тегеcontent
коды для прямого копирования (то есть, простую задачу). PS: я до сих пор удивляюсь, почему ребята из FontAwesome не размещают коды контента на каждой странице значков ?!Другое решение без необходимости вручную возиться с символами Unicode можно найти в статье « Создание шрифта Awesome awesome» - использование значков без i-тегов ( отказ от ответственности: я написал эту статью ).
В двух словах, вы можете создать новый класс, например:
А затем используйте его с любым значком, например:
источник
Если у вас есть доступ к файлам SCSS из font-awesome, вы можете использовать это простое решение:
источник
Пример ссылки: https://codepen.io/bungeedesign/pen/XqeLQg
Получить код значка с: https://fontawesome.com/cheatsheet?from=io
источник
Вы можете использовать Unicode для этого в CSS. Если вы используете шрифт Awesome 5, это синтаксис;
Вы можете увидеть их документацию здесь .
источник
Для работы Font Awesome 5 Free font-family у вас должно быть установлено значение font-weight - 900 .
Это рабочий:
источник
Как говорится на сайте FontAwesome FontAwesome =>
HTML:
CSS:
В
.login::before
-> изменитьcontent:'';
в соответствии с вашим Unicode.источник
Обновление для Font Awesome 5 с использованием SCSS
источник
Вот мой шрифт Webpack 4 +, отличное решение 5:
плагин webpack:
глобальный стиль CSS:
источник