Discourse FontAwesome Pro

:discourse2: Сводка Discourse FontAwesome Pro позволяет использовать иконки Font Awesome Pro в Discourse с помощью лицензии FontAwesome, используя токен NPM-пакета вашего аккаунта.
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/discourse-fontawesome-pro
:open_book: Гид по установке Как установить плагины в Discourse

Конфигурация

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

Во-первых, вам нужно установить дополнительную переменную окружения, содержащую ваш токен пакета font awesome pro (обратите внимание, что это отличается от вашего API-токена): DISCOURSE_FONTAWESOME_AUTH_TOKEN

Скрипт установки также должен вызываться во время инициализации в качестве дополнительного хука “after_code”. Это скачивает и добавляет SVG-файлы FontAwesome Pro при сборке, используя ваш токен аутентификации. Это отдельный блок, отличный от блока клонирования плагина.

Вот пример установки в app.yml:

env:
  DISCOURSE_FONTAWESOME_AUTH_TOKEN: 123456
  
hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/discourse-fontawesome-pro.git
    - exec:
        cd: $home/plugins/discourse-fontawesome-pro
        raise_on_fail: false
        cmd:
          - $home/plugins/discourse-fontawesome-pro/scripts/install.sh

Выбор семейства переопределения:

В настройках администратора вы можете переопределить семейство иконок Discourse по умолчанию:

Выбор стиля переопределения:

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

Duotone

Чтобы полностью контролировать поддержку duotone, вам нужно будет переопределить следующий CSS (в теме или иным образом) и заменить его на свою собственную цветовую схему:

svg {
  --fa-secondary-color: red;
  --fa-secondary-opacity: 0.6;
}

Чтобы раскрасить отдельные иконки, ссылайтесь на ID SVG:

#fad-search .fa-secondary {
  --fa-secondary-color: red;
  --fa-secondary-opacity: 0.6;
}

:warning: Обновление стиля Duotone
Если вы используете селекторы на основе классов, например:

.fa-secondary { color: red; }

Вам нужно будет обновить свой стиль, чтобы использовать CSS-переменные вместо этого. Переопределения цвета на основе классов больше не работают, поскольку они были удалены в Font Awesome v7


Под капотом здесь используется репозиторий FontAwesome для установки шрифтов в папку SVG плагина, и позволяет Discourse подбирать спрайты оттуда.

:discourse2: Хостинг у нас? Этот плагин доступен в наших корпоративных планах.

36 лайков

@featheredtoast Я пока не успел проверить, но загружает ли это последнюю версию Font Awesome Pro, например 6.x?

Здесь упоминалось об обходном пути:

Поддерживает ли последняя версия FA6 pro? @featheredtoast

Боюсь, что пока нет. Я думаю, что ситуация остаётся прежней:

3 лайка

Для тех, кто интересуется: это всё ещё не работает с v6, даже с последним ядром, которое его поддерживает. Чтобы иконки Pro заработали, всё равно нужно использовать --branch fa5.

3 лайка

Этот плагин всё ещё поддерживается? Мне интересно, можем ли мы сейчас использовать иконки FA(6) Pro.

Его ещё нужно немного прибрать — это в нашем списке, мы занимаемся этим — Простите за беспорядок.

2 лайка

Всем привет! Я обновил этот плагин для работы с FontAwesome v7. Документацию обновлю в ближайшее время.

6 лайков

Возможно, стиль regular не применяется корректно в настройках плагина? Проверив Find Icons with the Perfect Look & Feel | Font Awesome, я вижу, что иконки FA в стиле regular всегда пустые, но на моём сайте при применении стиля regular иконки всё равно остаются залитыми и в обычном режиме.!

2 лайка

Спасибо за сообщение об ошибке, исправление уже внесено в основную ветку. Дайте знать, если столкнётесь с другими проблемами.

2 лайка

Привет, Хуан!
Не связано ли это случайно?

1 лайк

У кого-то ещё возникает проблема с иконкой “d-icon-d-watching-first”, которая не работает при включённом плагине?
Тестировалось на версии 3.6.0.beta2 со следующими настройками:
Стиль иконок Fa установлен на regular
Семейство иконок Fa установлено на classic

1 лайк

О, отличное замечание. Я только что обновил плагин, чтобы он снова показывал правильный значок.

2 лайка

Другая ошибка (снова) проявилась при следующих настройках:

Стиль иконок Fa установлен в «regular»
Семейство иконок Fa установлено в «classic»

Когда для закладки установлен напоминание, иконка не отображается:

2 лайка

Спасибо! Только что загрузил исправление. Должно работать.

2 лайка

@Alteras

Что вы думаете о добавлении функции в плагин, которая позволит использовать другой стиль для всех иконок в активном состоянии? Например, я замечаю тенденцию: для активного состояния используются залитые иконки (в FA: стиль «solid»), а для обычного состояния — контурные иконки (в FA: стиль «regular»).

При использовании Discourse я заметил, что наличие контурных (то есть в стиле FA «regular») иконок в активном состоянии кажется «странным».

2 лайка

Похоже, API не работает с тарифом Lite за $60. Я предполагаю, что для использования API с иконками Pro нужен годовой тариф Pro за $99.

Нет, для API требуется опция загрузки и использование SVG-приложений, что возможно только в тарифе Pro (или выше). Тариф Pro Lite позволяет ограниченное веб-использование только через их Kit. Это не указано достаточно явно, и, вероятно, стоит добавить эту информацию в исходный пост.