Используйте Font Awesome Icons в CSS
У меня есть немного CSS, который выглядит так:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
Я хотел бы заменить изображение на иконку из Font Awesome.
Я не вижу в любом случае использовать значок в CSS в качестве фонового изображения. Можно ли это сделать, предполагая, что таблицы стилей / шрифты Font Awesome загружены до моего CSS?
14 ответов
Вы не можете использовать текст в качестве фонового изображения, но вы можете использовать :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).
В дополнение к ответу от Диодея выше, вам нужно 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";
}
Чтобы использовать шрифт 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.
Вы можете попробовать этот пример класса. и найти значок содержимого здесь: 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";
}
Я немного опаздываю на роль. Просто хочу предложить другой способ.
button.calendar::before {
content: '\f073';
font-family: 'Font Awesome 5 Free';
left: -4px;
bottom: 4px;
position: relative;
}
положение, слева и снизу используется для выравнивания значка.
Иногда также помогает добавление шрифта 600 или выше.
#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
Не нужно встраивать контент в 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 можно "расширить" значки 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.
}
Кажется, что данные ответы не дают реального фона, поскольку фоновое изображение отображается за пределами блока, в котором вы хотите получить фон. Вот мое решение, чтобы иметь «настоящий» фоновый эффект:
HTML:
<div id="bloc" class="bg_ico_outer" style="">
<i class="fa fa-bookmark-o bg_ico"></i>
<div class='bloc_inner'>
<h2>test fontawesome as background</h2>
</div>
</div>
CSS:
.bg_ico {
position: absolute;
top: 0px;
right: -10px;
font-size: 17em;
color: green;
transform: rotate(25deg);
}
.bg_ico_outer{position: relative; overflow: hidden;}
#bloc{
height: 200px;
width:200px;
background: blue;
margin:50px auto;
}
.bloc_inner{
position: absolute;
}
h2{color: white;}
Для этого вам просто нужно добавить 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 */
}
Это кажется самым простым решением :-)
#content h2:before {
font-family: FontAwesome;
content: "\f055";
position:absolute;
left:0;
top:0;
}
Используйте следующую программу Python через командную строку для создания изображений png из значков Font-Awesome: