Используйте Font Awesome Icons в CSS

305

У меня есть немного CSS, который выглядит так:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

Я хотел бы заменить изображение на иконку из Font Awesome .

Я не вижу в любом случае использовать значок в CSS в качестве фонового изображения. Возможно ли это сделать, предполагая, что таблицы стилей / шрифты Font Awesome загружены до моего CSS?

L84
источник
Символы из шрифтов не могут использоваться в качестве фона. SVG, однако, могут
cimmanon
@cimmanon могли бы вы объяснить , как это можно применить к шрифту удивительного
BonsaiOak
@BonsaiOak Что объяснить, что еще не объясняется выбранным ответом? Если у вас есть вопрос, на который нет ответа (или любой другой вопрос по SO), задайте новый вопрос.
Цимманон
@cimmanon извините за отсутствие ясности. Вы, похоже, подразумевали, что в качестве фона можно использовать значок из файла шрифта font-awesome.svg. Тем не менее, вы никогда не говорили об этом явно, поэтому я не уверен.
BonsaiOak
1
@BonsaiOak Да, вы можете использовать SVG в качестве фонового изображения, так же, как вы использовали бы любое другое изображение. Однако я на самом деле не смотрел на FontAwesome SVG, чтобы убедиться, что он может использоваться таким образом.
Цимманон

Ответы:

489

Вы не можете использовать текст в качестве фонового изображения, но вы можете использовать :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).

Диодей - Джеймс Макфарлейн
источник
63
Там есть текстовый эквивалент каждой иконки. Fortawesome.github.io/Font-Awesome/cheatsheet
Matthieu
61
Вам придется удалить & # x с начала и; с конца. Название семейства шрифтов - FontAwesome
Matthieu
5
@ Давид, это просто текст, используй font-size.
JCM
6
для FontAwesome v5 вам нужно использовать .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
Digvijayad
5
Просто обратите внимание, что это не похоже на работу с элементами ввода (например, кнопкой отправки), поскольку они не поддерживают: before или: after.
Мир
70

В дополнение к ответу от Diodeus выше, вам нужно font-family: FontAwesomeправило (при условии, что у вас уже есть @font-faceправило для FontAwesome, объявленное в вашем CSS). Тогда нужно знать, какое значение CSS-содержимого соответствует какому значку.

Я перечислил их все здесь: http://astronautweb.co/snippet/font-awesome/

Astrotim
источник
1
работал после того, как я удалил позицию: абсолют; в .element: раньше, теперь я могу украсить свои ссылки шрифтом с отличными значками, но сохранить свой собственный шрифт ссылки
jethroo
большой список значений контента!
Энтони
1
Как отмечено в ответе @staabm, FontAwesome поддерживает официальный список кодов для каждого глифа: fontawesome.io/cheatsheet
alxndr
24

На самом деле даже font-awesomeCSS имеет похожую стратегию для установки своих стилей иконок. Если вы хотите быстро овладеть icon кодом , проверьте non-minified font-awesome.cssфайл, и вот они ... каждый шрифт в своей чистоте.

Скриншот Font-Awesome CSS File

Акаша
источник
22

Подводя итог всему вышесказанному, следующий класс, который работает хорошо

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }
Лакшман Пилака
источник
лучший ответ, так как вы можете просто удалить предыдущий тег <i> перед нужным текстом со значком и заменить его этим. И то же место дается.
andygoestohollywood
7

Вы можете попробовать этот пример класса. и найти значок содержимого здесь: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }
Шив Сингх
источник
6

Чтобы использовать шрифт Awesome с помощью CSS, выполните следующие действия:

шаг 1 - добавление шрифтов FontAwesome в CSS

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

Шаг - 2 Используйте ниже CSS, чтобы применить шрифт к элементу класса HTML

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

И наконец, используйте класс sorting_asc, чтобы применить CSS к желаемому тегу / элементу HTML.

Равиндра Вайраги
источник
2

Не нужно встраивать контент в CSS. Вы можете поместить содержимое значка в элемент fa, а затем настроить значок css. http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>
Джордж Хикс
источник
8
"Не нужно встраивать контент в CSS". Ну, в некоторых ситуациях это необходимо.
Стефан Брукерт
2
Если вы не заботитесь о прогрессивном улучшении, это хорошо, но вы должны по-настоящему сохранить стиль внутри файла CSS, когда это возможно.
Адам Карр
2

В качестве альтернативы, если вы используете Sass, можно «расширить» значки FA для их отображения:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}
Хиура
источник
0

Для этого вам просто нужно добавить contentатрибут иfont-family атрибут к требуемому элементу через: before или: after, где это применимо.

Например: я хотел прикрепить значок вложения после всех aэлементов в моем сообщении. Итак, сначала мне нужно найти, существует ли такая иконка в fontawesome. Как и в случае , если я нашел его здесь , то есть fa fa-paperclip. Затем я бы щелкнул правой кнопкой мыши по значку и выбрал ::beforeпсевдо-свойство, чтобы извлечь contentтег, который он использует, что в моем случае оказалось \f0c6. Тогда я бы использовал это в моем CSS так:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }
Анимеш Сингх
источник