Как правильно подключать Font Awesome (или любые другие плагины)?

Вопросы по вёрстке и JavaScript
Ответить
Аватара пользователя
girmate
Сообщения: 1534
Зарегистрирован: 2015.10.27, 12:52

Как правильно подключать Font Awesome (или любые другие плагины)?

Сообщение girmate »

Вот согласно документации использования значков FontAwesome достаточно:

Код: Выделить всё

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Но в папке приходит куча файлов, в том числе и тех, назначение которых мне непонятно. Так вот шрифты FontAwesome я привел для примера, чтобы узнать:

вы в проект кладете всю папку или только css? Как правильно? Ведь в том же css могут быть отсылки к другим используемым файлам, изображениям, например (в общем случае). Я считаю все нужно положить в папку /web/vendor/font-awesome/ и оттуда вытягивать уже css в Asset. Есть куча других плагинов. Там в одной папке куча подпапок и вся смесь css, js и куча еще других файлов. Значит правильно все сразу класть отдельно и вытягивать в ассеты?
Осторожно! Вы общаетесь с новичком ;)
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: Как правильно подключать Font Awesome (или любые другие плагины)?

Сообщение ElisDN »

Font Awesome и подобные - это CSS/JS плагины. Это значит, что они доступны через Bower. Поэтому в Yii2:

1. Ставим bower-пакет через адаптер fxp-asset-plugin для Composer:

Код: Выделить всё

composer require bower-asset/font-awesome
2. Пишем ассет:

Код: Выделить всё

class FontAwesomeAsset extends AssetBundle
{
    public $sourcePath = '@bower/font-awesome';
    public $css = [
        'css/font-awesome.min.css',
    ];
}
3. Прописываем его в зависимостях у AppAsset:

Код: Выделить всё

class AppAsset extends AssetBundle
{
    ...

    public $depends = [
        'app\assets\FontAwesomeAsset',
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];
}
Всё.
Последний раз редактировалось ElisDN 2017.07.09, 23:38, всего редактировалось 4 раза.
Аватара пользователя
girmate
Сообщения: 1534
Зарегистрирован: 2015.10.27, 12:52

Re: Как правильно подключать Font Awesome (или любые другие плагины)?

Сообщение girmate »

Дмитрий, я думал в yii можно подключать только yii-расширения. А оказалось вон оно что. Громадное спасибо. То есть bower пакеты попадают в папку bower, куда можно ссылаться через алиас @bower. Громадное спасибо. И самое главное - автоматическое обновление и быстрая установка. Особенно если куча пакетов и расширений, которые часто ставить приходится. Спасибо, Дмитрий.
Осторожно! Вы общаетесь с новичком ;)
Аватара пользователя
bvlata
Сообщения: 16
Зарегистрирован: 2015.02.13, 02:35
Откуда: Екатеринбург
Контактная информация:

Re: Как правильно подключать Font Awesome (или любые другие плагины)?

Сообщение bvlata »

На последней версии 2.015.1 после загрузки через bower не видит шрифты font-awesome по вашей схеме. Что-то видимо изменилось?
robot32
Сообщения: 2
Зарегистрирован: 2018.05.23, 18:14

Re: Как правильно подключать Font Awesome (или любые другие плагины)?

Сообщение robot32 »

Всем привет! Такая же проблема. Пробовал адаптировать код к следущему виду:

Код: Выделить всё

<?php
namespace app\assets;

use yii\web\AssetBundle;

class FontAwesomeAsset extends AssetBundle
{
    public $sourcePath = '@app/resources';
    public $css = [
        'libraries/Font-Awesome/css/font-awesome.min.css',
    ];

    public $publishOptions = [
        'only' => [
            'libraries/*',
        ]
    ];

    public function init()
    {
        parent::init();
        $this->publishOptions['beforeCopy'] = function ($from, $to) {
            $dirname = basename(dirname($from));
            return $dirname === 'fonts' || $dirname === 'css';
        };
    }
}
Проблема сохранилась. В чем может быть проблема? У кого-нибдуь есть предположения?
robot32
Сообщения: 2
Зарегистрирован: 2018.05.23, 18:14

Re: Как правильно подключать Font Awesome (или любые другие плагины)?

Сообщение robot32 »

urichalex, спасибо. Готовые решения вполне работают)
Freeshnik
Сообщения: 1
Зарегистрирован: 2018.07.04, 08:23

Re: Как правильно подключать Font Awesome (или любые другие плагины)?

Сообщение Freeshnik »

Для тех, кто будет накатывать FA 5.1, там поменялся синтаксис - теперь класс иконок начинается с fas/fab/far (ранее был fa). Пример:

Код: Выделить всё

<i class="far fa-handshake"></i>
База иконок тут: https://fontawesome.com/icons?d=gallery
Ответить