Использование шрифтов Awesome Icons в CSS

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

Консолидация всего выше, это последний класс, который хорошо работает

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

Ответ 5

Не нужно вставлять контент в 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>

Ответ 6

в моей работе с этим css

.adminheader: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";
}

Ответ 7

Используйте следующую программу Python через командную строку для создания png-изображений из значков Font-Awesome:

https://github.com/Pythonity/font-awesome-to-png

Ответ 8

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

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

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }