Bootstrap 3 — Иконки Font Awesome
Установка шрифта
Чтобы подключить шрифт Font Awesome на свой веб-сайт вы можете воспользоваться двумя способами:
- Самый простой способ – это с помощью Bootstrap CDN. Для этого необходимо добавить одну строчку кода в раздел заголовка сайта. Ни чего загружать и устанавливать не надо.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
- Второй способ заключается в скачивании шрифта Awesome со страницы проекта, его распаковки в каталог сайта и подключения CSS файла «font-awesome.min.css».
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Готовую сборку с платформой Twitter Bootstrap 3 можете скачать по ссылке.
Использование иконок шрифта Awesome
Вы можете поместить иконки Awesome практически в любом месте, используя CSS префикс fa и имя иконки, которые расположены на сайте.
Шрифт Awesome предназначен для использования со строчными элементами HTML (можно использовать тег <i> для краткости, но использование тега <span> семантически более правильно).
<i></i> fa-camera-retro
Выше приведенный код будет выглядеть примерно так:
fa-camera-retro
Создание иконок увеличенного размера
Для увеличения размера иконок Вы можете воспользоваться классами fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или fa-5x.
<i></i> fa-lg <i></i> fa-2x <i></i> fa-3x <i></i> fa-4x <i></i> fa-5x
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Создание иконок с фиксированной шириной
Иконки с фиксированной шириной очень полезны при создании навигационных меню или различных списков. Чтобы создать такие иконки, используйте класс fa-fw.
<div> <a href="#"><i></i> Главная</a> <a href="#"><i></i> Книги</a> <a href="#"><i></i> Статьи</a> <a href="#"><i></i> Параметры</a> </div>
Иконки для маркированных списков
С помощью классов fa-ul и fa-li Вы можете заменить стандартные маркеры в неупорядоченных списках на другие иконки.
<ul> <li><i></i>Иконки Awesome</li> <li><i></i>могут использоваться</li> <li><i></i>как маркеры</li> <li><i></i>неупорядоченных списков</li> </ul>
- Иконки Awesome
- могут использоваться
- как маркеры
- неупорядоченных списков
Создание «вытянутых» иконок
Для создания «вытянутых» кавычек или иконок статей используйте классы fa-border и pull-right или pull-left.
<i></i> ...Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.
…Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.
Создание вращающихся иконок
Для создания вращающейся иконки используйте класс fa-spin.
<button type="button"><i></i></button> <button type="button"><i></i></button> <button type="button"><i></i></button> <button type="button"><i></i></button>
Создание повернутых и зеркально отраженных иконок
Чтобы повернуть и зеркально отразить иконки, используйте следующие классы fa-rotate-* и fa-flip-*.
<i></i> иконка<br> <i></i> иконка, повернутая на 90 градусов по часовой стрелки<br> <i></i> иконка, повернутая на 180 градусов по часовой стрелки<br> <i></i> иконка, повернутая на 270 градусов по часовой стрелки<br> <i></i> иконка,отраженная по горизонтали<br> <i></i> иконка, отраженная по вертикали
иконка
иконка, повернутая на 90 градусов по часовой стрелки
иконка, повернутая на 180 градусов по часовой стрелки
иконка, повернутая на 270 градусов по часовой стрелки
иконка,отраженная по горизонтали
иконка, отраженная по вертикали
Иконки, наложенные друг на друга
Чтобы наложить несколько иконок друг на друга, используйте класс «fa-stack» на родительском элементе, класс «fa-stack-1x» для иконки, который расположен на переднем плане и класс «fa-stack-2x» для иконки, расположенной на заднем плане.
Класс «fa-inverse» может использоваться для инвертирования цвета иконки.
<span> <i></i> <i></i> </span> иконка "Twitter" на иконке "квадрата"<br> <span> <i></i> <i></i> </span> иконка "флага" на иконке "круга"<br> <span> <i></i> <i></i> </span> иконка "терминала" на иконке "квадрата"<br> <span> <i></i> <i></i> </span> иконка "запрещено" на иконке "камеры"
иконка «Twitter» на иконке «квадрата»
иконка «флага» на иконке «круга»
иконка «терминала» на иконке «квадрата»
иконка «запрещено» на иконке «камеры»
javascript — Fontawesome и Vue3. Не подключается иконка
Вопрос задан
Изменён 5 месяцев назад
Просмотрен 38 раз
Есть необходимость подключить данную иконку:
https://fontawesome.
3.0.1″
}
// main.ts
import { createApp } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faYoutube, faGithub } from '@fortawesome/free-brands-svg-icons'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
library.add(fas, faYoutube, faGithub)
createApp(App)
.use(store)
.use(router)
.component('fa', FontAwesomeIcon)
.mount('#app')
// some component
<div>
<fa icon="coffee" size="lg"></fa>
</div>
Все работало нормально в такой конфигурации.
Вопрос:
Как корректно подключить в текущую конфигурацию новую вышеупомянутую иконку?
Если пробовать просто добавлять вот такой код в HTML — получаем следующий результат:
<template>
<div>
<font-awesome-icon icon="fa-solid fa-backward-step" />
<fa icon="coffee" size="lg"></fa>
</div>
<!-- <div> end -->
</template>
[Vue warn]: Failed to resolve component: font-awesome-icon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions. isCustomElement.
at <RewindChartApp>
at <Vue3DraggableResizable parent=true initW=750 ... >
at <ChartApp>
at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
isCustomElement.
at <RewindChartApp>
at <Vue3DraggableResizable parent=true initW=750 ... >
at <ChartApp>
at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
Иконка само собой вообще не отображается в данном случае.
- javascript
- vue.js
- fontawesome
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
псевдоэлементов CSS | Font Awesome Docs
Если изменение HTML в вашем проекте невозможно, вы можете использовать функцию CSS для добавления значков на страницу при использовании веб-шрифтов Font Awesome.
Работа с псевдоэлементами не для слабонервных.
Ссылка на значки с использованием псевдоэлементов более сложна и подвержена ошибкам, чем стандартный способ добавления элемента в ваш HTML.
Убедитесь, что вы хорошо разбираетесь в CSS и хотите узнать о некоторых основах, на которых работает Font Awesome.
О псевдоэлементах
CSS имеет мощную функцию, известную как псевдоэлементы (opens new window), которая позволяет вам визуально добавлять содержимое на страницу только с помощью CSS. Font Awesome использовал псевдоэлемент ::before для добавления значков на страницу с тех пор, как Font Awesome был совсем молодым.
Мы уже узнали, что Font Awesome использует такие классы, как fa и fa-user , для отображения иконок на вашем сайте. Давайте продублируем функционал этих классов и напишем свой, используя псевдоэлементы CSS.
Добавление значка с помощью псевдоэлементов CSS
1.
Определите общий CSS для всех значковВо-первых, вам нужно добавить некоторые общие свойства CSS, которые применяются ко всем значкам. Лучше сначала избавиться от этого, чтобы упростить свой индивидуальный значок CSS. Вы можете сделать это отдельным правилом или включить стиль в каждое отдельное правило значка (на следующем шаге).
2. Ссылка на отдельные значки
При ссылке на любой отдельный значок необходимо указать несколько важных элементов:
- Установите псевдоэлемент в соответствии с
::beforeили::after, который вы использовали на предыдущем шаге общей настройки. - Задайте для свойства CSS
fontправильное пользовательское свойство CSS (см. таблицу семейств ниже). Но учтите, что дуотоны нуждаются в особом обращении. - Установите для содержимого значение Unicode одного из наших значков.
Вот удобная таблица стилей/жирностей шрифта, которые вы можете использовать:
| Стиль | Availability | @font-face font-family | @font-face weight | CSS Custom Property | |
|---|---|---|---|---|---|
| Brands | Free Plan | Font Awesome 6 Free or Font Awesome 6 Pro для пользователей Pro | 400 | -FA-Font-Brands | |
| SOLIT | БЕСПЛАТНЫЙ ПЛАН | FONT Awesom0011 для пользователей PRO | 900 | -FA-FONT-SOLID | |
| Обычный | PRO только | FONT Awesom -Роукулярный | |||
| Light | Pro только | Font Awesom0071 | |||
| Sharp Solid | Pro only | Font Awesome 6 Sharp | 900 | --fa-font-sharp-solid | |
| Sharp Regular | Только Pro | Font Awesome 6 Sharp | 400 9-rp-fontular | 10011 | |
| Custom Icons | Pro Kits Только | Font Awesome Kit | - | - |
Duotone - это специальные чехлы, которые мы рассмотрим внизу.
См. Псевдоэлементы CSS в действии!
Нужен более практический пример того, как это сделать? Вот демонстрация Codepen (открывается в новом окне), показывающая, как отображать значки всех стилей с помощью псевдоэлементов CSS с помощью нашей платформы на основе веб-шрифтов.
Псевдоэлементы CSS и Duotone
Использование псевдоэлементов CSS для рендеринга двухцветных значков следует аналогичной настройке, но требует использования псевдоэлементов ::before и ::after вместе с дополнительными настройками стилей. .
1. Определите общий CSS для значков Duotone
Существуют общие свойства CSS, уникальные для стиля Duotone, которые потребуются для всех значков Duotone. Опять же, лучше сначала убрать это в CSS, чтобы упростить определения значков.
- Добавьте стиль к элементам, которые будут содержать псевдоэлемент для поддержки позиционирования.
- Установите шрифт
- Установите уровни непрозрачности и цвета по умолчанию для каждого слоя двухцветного значка.
2. Ссылки на отдельные слои значков
Ссылки на отдельные двухцветные значки работают так же, как и все значки псевдоэлементов CSS. Установите для содержимого значение Unicode одной из наших иконок. Для иконок Duotone у вас будет два значения — по одному для каждого слоя Duotone. Для door-open , у вас будет \f52b для основного уровня и \f52b\f52b для вторичного уровня.
Псевдоэлементы и Sass (SCSS)
Используя наши утилиты @include fa-icon- , вы можете легко добавлять значки с помощью пользовательских псевдоэлементов CSS. Эти примеси обрабатывают базовый рендеринг, который мы включаем в наш набор инструментов, чтобы значки отображались идеально. Наряду с этим они определяют правильный стиль значка для отображения значка.
Если вы предпочитаете определять эти правила стиля вручную, это тоже вариант.
Если вы используете наши миксины для рендеринга значка в нашем семействе стилей Sharp, вам необходимо указать ссылку на миксин @include fa-family-sharp вместе с миксином @include fa-icon-.
Псевдоэлементы и Less
С помощью наших утилит .fa-icon- mixin вы можете легко добавлять значки с пользовательскими псевдоэлементами CSS. Эти примеси обрабатывают базовый рендеринг, который мы включаем в наш набор инструментов, чтобы значки отображались идеально. Наряду с этим они определяют правильный стиль значка для отображения значка.
Если вы предпочитаете определять эти правила стиля вручную, это тоже вариант.
Если вы используете наши примеси для рендеринга значка в нашем семействе стилей Sharp, вам необходимо указать примесь .fa-family-sharp вместе с примесью .fa-icon-.
Псевдоэлементы CSS с нашей платформой SVG+JS
Если вы используете нашу инфраструктуру SVG + JS для рендеринга значков, вам нужно сделать несколько дополнительных действий:
Включить псевдоэлементы
Использование псевдоэлементов CSS для рендеринга значков отключено по умолчанию при использовании нашего SVG + JS Framework.
Вам нужно добавить