Использовать шрифт потрясающие иконки в CSS

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

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

Я хотел бы заменить изображение значком из Шрифт Удивительным.

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

11 253
css font-awesome

11 ответов:

вы не сможете использовать текст в качестве фонового изображения, но вы можете использовать :before или :after псевдоклассы для размещения текстового символа там, где вы хотите, без необходимости добавлять все виды беспорядочной дополнительной разметки.

будьте уверены, чтобы установить position:relative на вашей фактической текстовой обертке для позиционирования для работы.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "AE";  /* 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;
 }
421

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

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

65

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

Font-Awesome CSS File screenshot

19

консолидируя все выше, ниже приведен окончательный класс, который хорошо работает

   .faArrowIcon {
        position:relative;
    }

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

в шахте работает этот 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";
}
3

нет необходимости встраивать содержимое в 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>
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.
}
1

чтобы использовать шрифт 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-тег / элемент.

1

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

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

0

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

например: я хотел прикрепить значок вложения после все 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 */
    }
0
#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

Пример Ссылки: https://codepen.io/bungeedesign/pen/XqeLQg

получить код значка из: https://fontawesome.com/cheatsheet?from=io

0