ProfiPHPProfiPHP
  1. Главная
  2. Прочее
  3. Font-Awesome - бесплатный и свободный шрифт со значками

Font-Awesome - бесплатный и свободный шрифт со значками

Век живи — век учись. Можно всю жизнь заниматься любимым делом, но все равно до конца его не изучить. Точно такая же ситуация случилась со мной. Занимаюсь разработкой веб-сайтов достаточно долго и только недавно узнал об отличной реализации значков на сайте. Дело пойдет о Font Awesome - бесплатном и свободным шрифтом со значками.

Сразу напишу самое главное преимущество! Шрифт Font Awesome содержит значки в векторной форме, что позволяет принимать любой размер и любой цвет. А это очень важно, поскольку сейчас обязательно необходимо наличие адаптивной версии сайта, что приводит к автоматическому увеличению пиктограмм.

Приведу стандартный пример с использованием простых пикторгам и шрифта Font Awesome для разных масштабов:

Как видно из примера, разница просто невероятная. При увеличении масштаба изображение не теряет своего качества.

Для установки вы можете использовать Font Awesome CDN - самый простой способ получить шрифт Awesome на вашем веб-сайте, причем всего лишь с одной строкой кода. Для этого достаточно ввести имя почтового ящика на странице http://fontawesome.io/get-started/, на который придет ссылка на JS файл, например:
<script src="https://use.fontawesome.com/423f13dсd6.js"></script>
Для самостоятельного управления Font Awesome необходимо:

1. Скачать архив на странице: http://fontawesome.io/get-started/

2. Скопировать каталог в свой проект.

3. В <head> вашего html указать ссылку на ваш шрифт - awesome.min.css:
<link rel= "stylesheet" href= "css/font-awesome.min.css" > 
Теперь вы можете размещать значки Font Awesome практически где угодно используя префикс CSS "fa" и имя значка. Шрифт предназначен для использования с встроенными элементами, например "i" или "span".
<i class= "fa fa-heart" ></i> .fa-heart
Если вы измените размер шрифта контейнера значка, значок станет больше. То же самое касается цвета, тени и всех остальных характеристик, которые наследуются с помощью CSS.

Шрифт Font Awesome позволяет увеличить размеры значков относительно их контейнера, устанавливать значки с фиксированной шириной, значки в неупорядоченных списках, заставить любой значок вращаться, произвольно повернуть и перевернуть значки, стекировать несколько значков и другие операции. Более детально можно узнать на странице примеров - Font Awesome Examples.

Также опишу пример использования BB кодов с ярлыками изображениями и ярлыками пиктограмами шрифта Font Awesome:

Как видно - разница очень существенна. Может кому то пригодится, код реализации:
<style type="text/css">
#toolbar .fa{ font-size: 16px; padding: 5px; background: #fff; float: left; margin: 0 1px 0 0; min-width: 14px; text-align: center }
#toolbar .input_field { padding: 2px; position: relative; float: left }
#toolbar .input_field .fa-file-photo-o{ position: absolute; top: 0px; left:0px }
</style>
<div id="toolbar">
<i class="fa fa-bold"></i>
<i class="fa fa-italic"></i>
<i class="fa fa-underline"></i>
<i class="fa fa-file-code-o"></i>
<i class="fa fa-link"</i>
<i class="fa fa-youtube"></i>
<div class="input_field">
<span class="fa fa-file-photo-o"></span>
<input type="file" />
</div>
</div>
Список всех значков версии font-awesome-4.7.0:

Добавить комментарий

Имя:
Текст комментария: