Меню

Как изменить цвет иконок awesome



Как использовать и оформлять иконки с помощью CSS?

Содержание:¶

  1. Необходимые шаги для использования иконок
  2. Использование иконок Font Awesome
  3. Масштаб иконок Font Awesome и их цвет
  4. Использование иконок с кнопками
  5. Добавление эффекта тени к иконкам
  6. Использование иконок Font Awesome в списке
  7. Анимация иконок Font Awesome
  8. Поворот иконок Font Awesome

Необходимые шаги для использования иконок¶

Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:

1) Подключите иконки к сайту ¶

Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в каждого шаблона или страницы, где хотите использовать иконки Font Awesome.

Здесь мы используем версию 5.8.1 link rel , чтобы определить связь между текущим документом и файлом со ссылкой:

2) Добавьте иконки к вашему UI¶

Иконки должны быть расположены внутри элемента . Найдите необходимую вам иконку и скопируйте ее HTML код.

Код иконки будет выглядеть следующим образом:

3) Добавьте стиль к иконкам¶

Можно легко изменить размер и цвет иконки и даже добавить к ней тени, используя только CSS. Иконки также могут быть перемещаемы и анаимируемы.

Как использовать иконки Font Awesome¶

Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом ( fas, fal, far или fab ).

Используйте элемента для ссылки на элемент:

Или используйте элемент span :

Пример¶

Масштаб иконок Font Awesome и их цвет¶

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs , span >fa-sm, fa-lg , fa-2x и др.

Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента

Пример¶

Класс Величина
fa-xs .75em
fa-sm .875em
fa-lg 1.33em
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em
fa-6x 6em
fa-7x 7em
fa-8x 8em
fa-9x 9em
fa-10x 10em

Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.

Пример¶

Использование иконок с кнопками¶

Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент .

Пример¶

Добавление эффекта тени к иконкам¶

Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.

Установите тень для того элемента, к которому относится иконка:

Пример¶

Использование иконок Font Awesome в списке¶

С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.

Используйте класс fa-ul для элемента

    и класс fa-li для элемента
    , чтобы заменить маркеры по умолчанию в неупорядоченном списке.

Пример¶

Анимация иконок Font Awesome¶

Используйте класс fa-spin для плавного вращения иконки и класс fa-pulse fa-spinner.

Будет выглядеть таким образом:

Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse :

Пример¶

Пример с несколькими анимированными иконками:

Пример¶

Поворот иконок Font Awesome¶

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

Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-* .

Источник

Awesome шрифт подключение пример увеличение , цвет иконок Awesome

Поддержи проект.

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

Что такое Awesome -> где скачать!?

Что такое Awesome!?

Это шрифт, с помощью которого вы сможете поставить иконку к себе на сайт. И это очень удобно! В шрифте есть такое количество различных иконок, что точно вы найдете именно ту иконку, которая вам нужна.

См. дополнительно несколько страниц о шрифтах Awesome

Как устанавливать шрифты Awesome!?

Зашли на сайт Awesome, скачиваем шрифты. И инструкция и название иконок по ссылке – иконки.

4.09.2018

В архиве будет папка font-awesome-4.7.0 заходим в неё и ищем две папки, которые нам понадобятся.

Бросаем их в папку, где они будут доступны для подключения!

Здесь путь от корневой папки /font-awesome.css»>

Обязательно проверяем правильность пути, чтобы он был доступен по выше написанной ссылке

Как найти нужный код иконки шрифта Awesome

Если у вас плохо с английским – идем в любой переводчик, Гугл переводчик, Яндекс переводчик. И ищем то слово, иконку которой вам требуется! Возможно, что вашего слова не будет – ищем аналогичное, ищем несколько раз – похожие слова!

Не забываем, что английский – это не богатый язык!

После того, как вы введете название, ну например «house» вам выведутся возможные варианты. если вдруг ничего не найдено, попытайтесь ввести синоним, либо другое название искомой иконки. Либо опуститься чуть ниже и выбрать вручную требуемую иконку.

Мы видим, что по нашему запросу вывелось два ответа, и первый вариант, который слева нам подходит. На данной иконке — ссылка — нажимаем.

Пример установки шрифта Awesome на сайте

После того, как мы попадем на страницу с иконкой, то внизу будет код, который нам и требуется!

Источник

Работа со шрифтом Awesome

  • CSS — CSS3
  • HTML — HTML5
  • Flexbox CSS — уроки
  • JavaScript
  • Плагины и расширения
  • Шпаргалки по Битрикс
  • Продвижение сайтов
  • Web-ДИЗАЙНЕРУ
  • ЗАРАБОТОК в интернете
  • Виды интернет-сайтов
  • Разное

Дата публикации: 06.02.2018

Что такое Font Awesome

Иконочный шрифт Awesome — это простой шрифт, содержащий в себе в место букв символы и специальные знаки, которые легко оформлять через CSS по такой же аналогии как делаем мы это с простым шрифтом. То есть, при помощи CSS можем установить для них цвет, поменять размер, задать тень и многое другое.

В библиотеке Font Awesome версии 4.7.0 содержится 646 иконок различных тематик, которые можно задействовать как для коммерческих проектов так и личного использования абсолютно бесплатно.

1. Как подключить шрифт Awesome

Можно выделить два способа, это использование сторонних ресурсов от куда будем подгружать файл font-awesome.css и подключать шрифты через CSS или следующий способ, это скачиваем к себе архив с шрифтом Awesome и подключаем его при помощи тега
. Далее более подробно разберем каждый из этих способов.

Способ 1

Используем сторонние сервисы CDNJS или BootstrapCDN. Размещенный на них файл font-awesome.css мы подключаем при помощи данных строк:

Для подключения с CDNJS:

Для подключения с BootstrapCDN:

Этот код нужно добавить в раздел желательно выше основного подключения style.css . После того как файл подключили, можно приступать использовать иконки на своем ресурсе.

Способ 2

Переходим на сайт Font Awesome, и скачиваем архив со шрифтом. Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки это css и папка fonts . Закачиваем их на свой сервер где расположен сайт, если есть папки с таким названием, то просто добавляем из них содержимое. Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега
, только теперь из папки css нашего сайта.

Используем полную версию:

Используем минимизированную версию:

2. Как работать с иконками Font Awesome

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

Второй способ, добавляем иконки при помощи псевдоэлементов ::before и ::after , а так же соответствующего значения свойства content для иконки. Обязательно указываем font-family: FontAwesome иначе шрифты работать не будут.

2.1. Как увеличить иконку

Что бы увеличить размер иконки достаточно в css прописать font-size и задать параметр. Так же можно увеличить размер иконки относительно его контейнера используя определенные классы fa-lg (увеличивает на 33%), fa-2x , fa-3x , fa-4x или fa-5x .

fa-lg fa-2x fa-3x fa-4x fa-5x

2.2. Как фиксировать ширину иконки

Для фиксирования ширины иконки используется класс fa-fw , задав его, мы фиксируем ширину тем самым можем их использовать как для навигации так и для оформление списков.

2.3. Как маркировать списки LI иконками

Для замены стандартных маркеров в блоке

    .

используются классы fa-ul и fa-li .

    элемент списка элемент списка элемент списка элемент списка

2.4. Кавычки для цитат обрамленные в рамке

Что бы установить рамку для иконки используем класс fa-border , а при помощи pull-right и pull-left можем добавят кавычки для текста.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.

2.5. Анимированные иконки

Что бы анимировать любую иконку достаточно добавить класс fa-spin для круговой анимации и для пульсирующей анимации fa-pulse . Так же можно использовать классы fa-spinner , fa-refresh , и fa-cog .

fa-spin fa-cog fa-spin fa-spinner fa-spin fa-refresh fa-spin fa-circle-o-notch fa-pulse fa-spinner

2.6. Поворачивание и отзеркаливание иконок

Для поворота иконки используется класс rotate-* в котором указываем числовое значение на какой градус иконка будет повернута. Для зеркального отображения используется два класса это fa-flip-horizontal для горизонтальное отзеркаливание и вертикального icon-flip-vertical .

normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal fa-flip-vertical

2.7. Группирование иконок

Иконки можно группировать накладывая их друг на друга, тем самым комбинируя их между собой. Чтобы создать группу из иконок, задаем класс для родителя fa-stack . Можно изменять размер иконки, класс fa-stack-1x задает стандартный размер, а класс fa-stack-2x для увеличения. Так же можно увеличивать при помощи классов fa-lg , fa-2x , fa-3x , fa-4x , или fa-5x .

fa-twitter на fa-square-o fa-flag на fa-circle fa-terminal на fa-square fa-ban на fa-camera

2.8. Примеры использование иконок в Bootstrap 3

Иконки Awesome прекрасно работают в Bootstrap и это хорошо видно из данных примеров.

3. Группы иконок

В версии Font Awesome 4.7 включены новые 41 иконка. Иконки разбиты на группы для удобного отбора при помощи поиска или по навигации. У каждой иконки представлен класс и CSS код для вставки при помощи свойства content.

Источник

WordPress. Как менять иконки FontAwesome

Октябрь 29, 2013

Из этого туториала вы узнаете, как менять иконки Font Awesome в шаблонах WordPress.

Давайте поменяем иконки из описания поста. Эти иконки отображаются с использованием шрифта Font Awesome.

Проверьте иконку с помощью программного обеспечения для разработчиков Firebug. Вы можете найти более подробную информацию о том, как использовать Firebug здесь. В нашем случае это класс «icon-bookmark» . Этот код отображается в

Теперь надо переписать код оригинальной иконки с помощью CSS. Откройте файл themeXXXXX/style.css в вашем редакторе (здесь XXXXXX — это номер темы шаблона).

Надо создать селектор CSS, что перепишет код оригинальной иконки. Скопируйте название нужного класса, его можно определить, используя Firebug. В нашем примере это post_category.

Вставьте название класса в CSS файл и добавьте символ . (точка), чтобы создать селектор CSS.

Скопируйте код иконки. Его можно определить с помощью Firebug.

Вставьте код в файл .css. Ваш селектор CSS должен выглядеть, как и представленный на скриншоте:

Теперь надо специфицировать код иконки в файле style.css. В Firebug мы видим ссылку на внешний файл CSS. Этот файл используется иконками Font awesome.

Внимание: r=3.2.1, означает, что в шаблоне используются иконки Font awesome версии 3.2.1. Убедитесь, что указываете коды для иконок из правильной версии шрифта. В противоположном случае, они могут не появится на сайте.

Вы можете воспользоваться поисковиком для того, чтобы найти список иконок Font Awesome подходящей версии. Воспользуйтесь поиском по следующим ключевым словам:
font awesome 3.2.1 cheatsheet. Пожалуйста, обратите внимание, что 3.2.1 — это версия иконок Font awesome (в вашем шаблоне эта версия может быть другой). Откройте ссылку для «font Awesome 3.2.1 Cheatsheet».

Здесь вы увидите список иконок и их коды. Давайте заменим нашу иконку на icon- warning -sign. Скопируйте код этой иконки. Он должен выглядеть, как f071.

Вставьте этот код в ваше правило CSS со знаком обратного слэша в начале. Добавьте !important , чтобы убедится, что оригинальные стили будут переписаны. В нашем случае измененный код выглядит, как на скриншоте:

Сохраните изменения и загрузите отредактированный файл на сервер. Обновите страницу, чтобы увидеть внесенные изменения.

Как вы видите, правило для оригинальной иконки было переписано в файле style.css. Пожалуйста, сделайте такие же изменения и для других иконок.

Вы также можете просмотреть видео туториал:

Источник

Читайте также:  Колодки тормозные синего цвета