Custom Header Links (icons)

Мой ответ ниже был адресован удалённому посту, который содержал следующее. Меня всё ещё интересуют иконки FA5…

Можно ли всё ещё добавлять иконки с помощью этого плагина? Спрашиваю, потому что он больше не работает. Мне нужно добавить иконки Facebook, Twitter и Instagram.

Здесь нет опции для SVG-иконки: [скриншот]

Оно работало у вас раньше? Что изменилось и что вы уже пробовали?

Возможно, вы скачали версию этого плагина без иконок?

Мне удалось заставить работать иконки Font Awesome 4, но не Font Awesome 5 (кроме 2–3 встроенных): см. мой пост выше.

Да, я на самом деле скачал версию без иконок, я понял это после некоторого исследования. Сейчас это работает с discourse-icon-header-links.

Отлично. Не могли бы вы поделиться настройками, которые вы использовали? Я хотел бы их попробовать, чтобы понять, где я ошибался. Спасибо.

Конечно, вот оно: - Screenshot by Lightshot

Facebook, fab-facebook, https://www.facebook.com/, vdo, blank
Twitter, fab-twitter, https://www.twitter.com/, vdo, blank
Instagram, fab-instagram, https://www.instagram.com/, vdo, blank

Дайте знать, если это поможет :slight_smile:

1 лайк

Большое спасибо. Это три встроенных, которые тоже сработали у меня.

Не могли бы вы попробовать другие иконки FA5 и сообщить, как всё прошло?

Я попробовал LinkedIn, и это работает: Screenshot by Lightshot

Если вы добавляете какие-либо иконки FA5, убедитесь, что включили классы иконок FontAwesome 5 для каждой используемой иконки в разделе SVG-иконок здесь: Screenshot by Lightshot

Спасибо!

1 лайк

Я очень это ценю. Работает ли это и с иконками, не являющимися fab-?

Нет, без fab- это не работало.

Кажется, это не совсем так, хотя заранее извиняюсь, если я ошибаюсь…

Например, чтобы использовать иконку address-card с Address Card Icon | Font Awesome, нужно заменить far fa-address-card на far-address-card (и добавить это в настройку svg icon subset). Просто использование имени без префикса fa- не работает.

Я понял это только после просмотра FEATURE: Update Font Awesome to v5.4.1 and SVGs by pmusaraj · Pull Request #6557 · discourse/discourse · GitHub и FEATURE: Update Font Awesome to v5.4.1 and SVGs by pmusaraj · Pull Request #6557 · discourse/discourse · GitHub

1 лайк

Есть ли способ удалить существующие ссылки в заголовке?

Мне удалось установить
Теперь я хочу добавить эту иконку Rocket Icon | Font Awesome со ссылкой на категорию транспортных средств
Я сделал следующее:
Мобильная ссылка для рабочего стола, fas-rocket, c / vehiculos / 69, vdm, blank
А ниже я добавил
fas-rocket

Но иконка не отображается. Как мне загрузить иконку?

Попробуйте просто «rocket».

Это предположение основано на поиске слова «rocket» по адресу FEATURE: Update Font Awesome to v5.4.1 and SVGs by pmusaraj · Pull Request #6557 · discourse/discourse · GitHub.

3 лайка

Спасибо, вы не знаете, доступен ли этот значок?

Думаю, мне придется добавить его вручную. Это немного сложно для меня.
Будет ли это выглядеть так?

В плагинах: просто включите файл SVG-спрайта в папку plugins/your-plugin-name/svg-icons. Перезапустите сервер (если вы в режиме разработки) или пересоберите сайт, если используете Docker-контейнер, и ваши пользовательские значки должны стать автоматически доступными.

Может ли кто-нибудь дать краткое руководство по добавлению значка маски на форум, размещенный на DigitalOcean, для человека, который ничего не знает? Спасибо.

Я только что протестировал это на своём форуме, временно изменив один из значков. Значок работает, если вы указываете его как rocket (без кавычек) в header links. Если это не сработает, возможно, проблема в остальной части вашей строки. Нет необходимости добавлять его в svg icons.

1 лайк

Да, большое спасибо, ракета сработала идеально. Но теперь я хочу добавить следующее:

Извините. Я ошибочно предположил, что вы всё ещё имели в виду оригинальную иконку. Иконка театра не упоминается в коде, поэтому она не будет работать.

Я перепробовал всё возможное, чтобы добавить иконки FA5, но у меня не получилось. Ни одна из предложенных здесь рекомендаций мне не помогла.

Ничто из того, что я помещал в svg icons, не имело никакого эффекта. Примечательно, что иконка Instagram, упомянутая в относительно недавнем посте, присутствует в коде, и я думаю, что она работает именно по этой причине (а не потому, что была добавлена в svg icons).

1 лайк

Я получил следующий отчет о безопасности для этого компонента; могу ли я настроить его на использование кода rel="noreferer, noopener"?

1 лайк

После обновления до последней версии Discourse иконки больше не отображаются. В чём может быть проблема?

2 лайка

Мы добавили это в наш экземпляр, и это просто великолепно. Большое спасибо за этот плагин!

Возможно ли добавить настройку для создания белого пространства между новыми иконками и существующими иконками по умолчанию? Я могу имитировать это, добавляя ,,,,, но это по умолчанию приводит к переходу на страницу настроек темы, хотя нам нравится именно такой вид;
Screen Shot 2021-05-20 at 13.22.40

3 лайка

Здорово это слышать :+1:

Конечно, я только что добавил это здесь (по умолчанию выключено)

Удалите пустую настройку из ваших настроек, обновите компонент, включите новую настройку, и после обновления страницы всё должно начать работать.

5 лайков