Font awesome icons как подключить: Bootstrap 3

Содержание

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 месяцев назад

Изменён 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>

Иконка само собой вообще не отображается в данном случае.

P.S. Pro версии у меня нет — расчитываю на Free вариант.

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 Font Awesome 6 Pro 100 --fa-font-thin
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, чтобы упростить определения значков.
Добавьте стиль к элементам, которые будут содержать псевдоэлемент для поддержки позиционирования.
Установите шрифт в качестве пользовательского свойства 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. Вам нужно добавить

Штирлиц — Сеть печатных салонов в Перми

Font awesome icons как подключить: Bootstrap 3 — Иконки Font Awesome

Bootstrap 3 — Иконки Font Awesome

Установка шрифта

Использование иконок шрифта Awesome

Создание иконок увеличенного размера

Создание иконок с фиксированной шириной

Иконки для маркированных списков

Создание «вытянутых» иконок

Создание вращающихся иконок

Создание повернутых и зеркально отраженных иконок

Иконки, наложенные друг на друга

javascript — Fontawesome и Vue3. Не подключается иконка

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

псевдоэлементов CSS | Font Awesome Docs

О псевдоэлементах

Добавление значка с помощью псевдоэлементов CSS

1.

2. Ссылка на отдельные значки

Псевдоэлементы CSS и Duotone

1. Определите общий CSS для значков Duotone

2. Ссылки на отдельные слои значков

Псевдоэлементы и Sass (SCSS)

Псевдоэлементы и Less

Псевдоэлементы CSS с нашей платформой SVG+JS

Включить псевдоэлементы