ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

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

2018/09/04 Марат 447 0 CSS |

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

Где скачать шрифты Awesome!?

Офсайт где можно качать шрифты Awesome - http://fontawesome.ru/

Что такое Awesome!?

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

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

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

Awesome шрифт подключение

4.09.2018
Какое-то время назад проявились изменения, которые я не видел, и в которых надо еще разбираться! Но мы все же хотим загрузить и пользоваться теми иконками, и у нас появится дополнительный шаг – новое окно – выбираем нет «Спасибо, просто скачать»

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

1. Css.
2. Fonts.

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

Создаем путь .

<link rel="stylesheet" href="https://dwweb.ru/Здесь путь от корневой папки/font-awesome.css">

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

Реализация и код Awesome.

После чего нам собственно нужен будет код иконки, чтобы поставить его в код.

Зашли в иконки ищем строку поиска и вбиваем требуемое название вашей иконки - это нужно делать на английском

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

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

Awesome шрифт подключение

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

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

Awesome шрифт подключение

Использование кода Awesome.

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

Awesome шрифт подключение

Вставляем данный код там, где требуется.

<i class="fa fa-home" aria-hidden="true"></i>

Результат:

Увеличение размера шрифта Awesome.

Редактирование размера шрифта Awesome - это банальное увеличение размера шрифта, можно в самой иконке, можно через файл css/

К примеру вот так:(Это пример , естественно, что я так не буду делать, а сделаю через файл css.)
 <i class="fa fa-home" aria-hidden="true" style="font-size: 20px;"></i> 

Результат:

Ну и последний вариант, поставим 50px:

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

Нам просто в стилях, нужно изменить цвет шрифта, и тогда иконка Awesome станет тем цветом, какой вы хотите, чтобы она была!

Давайте нашу иконку покрасим в красный цвет…

<i class="fa fa-home" aria-hidden="true" style="color:red; font-size: 50px;"></i>

Результат:

С вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
шрифт awesomeшрифт font awesomeскачать шрифт awesomeскачать шрифт font awesomeшрифт fucking awesomeшрифт иконок awesomeиконочный шрифт font awesomefont awesome regular скачать шрифтшрифты иконки font awesomeподключить шрифт awesomeподключение шрифта font awesome

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) https://dwweb.ru/ http://calc.dwweb.ru/ http://kod.dwweb.ru/ http://marrex.ru/ http://pro.dwweb.ru/ https://f0rlink.com/ https://comments.dwweb.ru youtube Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019