Использование иконок FontAwesome в Laravel

Blade CSS Вьюхи

Автор: ACym.ru - July 7, 2016 8:59 pm

Как подключить FontAwesome к приложению Laravel

Удобство использования шрифтовых иконок FontAwesome для украшения текста и кнопок не вызывает сомнений.

Подключить FontAwesome к написанному на Laravel проекту очень просто, и вот как это сделать.

Для начала нужно скачать с офсайта FontAwesome файл со стилями и шрифты.

Идем на страницу fontawesome.com, кнопка Download (по этой ссылке начнется скачивание текущей на сегодня версии FontAwesome 4.6.3) для скачивания находится на самом видном месте.

Скачиваем архив, и распаковываем его на своем жестком диске.

У вас получится 4 папки. Нам нужны 2 из них: css и fonts. В первой находится файл со стилевым оформлением, во второй - шрифты, используемые для отрисовки иконок.

Две другие папки, sas и less понадобятся тем, кто будет вносить изменения в дефолтный пакет FontAwesome, в них файлы, необходимые препрроцессору Laravel для компиляции файлов со стилями. Для простоты я этот момент опускаю, давайте просто "прикрутим" сами шрифты.

Итак, файл font-awesome.css из папки css скачанного архива отправляем в папку своего проекта /public/css, а шрифты - в папку /public/fonts. Естественно, если вы только начали составлять новый проект на Laravel, и этих папок в вашем проекте еще нет, создаем их.

Теперь нужно подключить стилевой файл к проекту. Лучше всего - добавить ссылку на font-awesome.css в шапку основного шаблона.

Скажем, если ваш основной шаблон называется main.blade.php, то открываем его в текстовом редакторе, находим раздел head, и в этом разделе (где-нибудь после тега title) прописываем путь к стилевому файлу FontAwesome.

Для указания пути к файлу FontAwesome лучше всего использовать хелпер asset, он просто укажет приложению правильный путь до вашей папки /public.

Вот код, который должен у вас получиться:

<link href="{{ asset('css/font-awesome.css') }}" rel="stylesheet" type="text/css">

На этом подключение FontAwesome заканчивается, и начинается его использование.

На офсайте FontAwesome.io в верхнем меню можно найти пункт icons, и посмотреть коды иконок. Найдя нужную иконку, нажимаете на нее, и получаете код, который нужно прописать на странице для ее вывода.

Ну, например, пишите (код этой иконки на офсайте можно посмотреть по этой ссылке):

<i class="fa fa-beer"></i>

Теперь открываете страницу в браузере, и видите вставленную в нее кружку пива.

Поздравляю с успешным подключением FontAwesome к вашему проекту. Заходите на LaraNotes.ru, чтобы почитать заметки про разработку приложений на фрэймворке Laravel, и поделиться собственными рецептиками.

Удачи!
Адрей Кимвр

.

.

.