Использование шрифтов Awesome Icons в CSS
У меня есть CSS, который выглядит так:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
Я хотел бы заменить изображение значком из Шрифт Удивительным.
Я все равно не вижу, чтобы использовать значок в CSS в качестве фонового изображения. Возможно ли это сделать, предполагая, что таблицы стилей/шрифты шрифта загружаются до моего CSS?
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;
}
в дополнение к ответу от Diodeus выше, вам нужен font-family: FontAwesome
правило (при условии, что у вас есть @font-face
правило для FontAwesome объявлено уже в вашем CSS). Тогда речь идет о том, какое значение содержимого CSS соответствует значку.
Я перечислил их все здесь: http://astronautweb.co/snippet/font-awesome/
на самом деле даже font-awesome
CSS имеет аналогичную стратегию для установки своих стилей значков. Если вы хотите быстро получитьicon
код, Регистрация non-minified font-awesome.css
файл и вот они....каждый шрифт в своей чистоте.
консолидация всего выше, ниже приведен окончательный класс, который работает хорошо
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "\f0a9";
}
в шахте работает этот 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";
}
нет необходимости вставлять контент в 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>
кроме того, при использовании Sass можно" расширить " значки ОС для их отображения:
.mytextwithicon:before {
@extend .fas, .fa-angle-double-right;
@extend .mr-2; // using bootstrap to add a small gap
// between the icon and the text.
}
для использования Font 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-тегу/элементу.
используйте следующую программу Python через командную строку для создания png-изображений из шрифта-удивительные значки:
для этого вам просто нужно добавить 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 */
}
#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