• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как добавить значок Font Awesome с помощью CSS (Создать иконку из шрифта Font Awesome в CSS)
Как добавить значок Font Awesome с помощью CSS
Kosten
Пятница, 22 Февраля 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Сейчас трудно современный дизайн сайта подставить без шрифтовых иконок. Когда вы декорируете фоновые флажки или переключатели с помощью CSS3, то есть такие вещи, как использование значков, чтобы было легче увидеть, проверяют ли они. Конечно, вы можете загружать изображения с background-image, но есть вещи, которые затрудняют подготовку каждого изображения.

Вот почему я говорил о том, чтобы применить фоновый шрифт к фону, чтобы использовать значок без использования изображений.

Для этого вам нужно будет использовать следующий CSS-код для нужного элемента, а затем заменить в значении содержимого соответствующий значок.



Создать иконку из Font Awesome с помощью CSS

Font Awesome - это веб-шрифт, содержащий все значки из фреймворка Twitter Bootstrap, назначая значения контента в css, вы можете создавать значки по своему усмотрению. Предполагая, что вы хотите создать иконку из любого элемента, просто объявите следующее:

CSS

Код
.element {
    position: relative;
}

/** заменить значение содержимого на
соответствующее значение из списка ниже */

.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}


Также с другого источника так описано.

Font Awesome - это веб-шрифт, содержащий все значки из фреймворка Twitter Bootstrap, назначая значения контента в css, вы можете создавать значки по своему усмотрению. Предполагая, что вы хотите создать значок из любого элемента, просто объявите его следующим образом.



Примечание: невозможно использовать псевдоконтент: before или: after для input элементов.

Выбрать значение иконки для CSS
Прикрепления: 9597050.png (24.2 Kb) · 7606488.png (72.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как добавить значок Font Awesome с помощью CSS (Создать иконку из шрифта Font Awesome в CSS)
  • Страница 1 из 1
  • 1
Поиск: