Этот компонент включает настройку темы, которая позволяет добавлять столько ссылок, сколько вы хотите, определять их значки и решать, на каких устройствах они будут отображаться!
Название
Описание
ссылки в шапке
Список ссылок со следующими свойствами: заголовок, значок, URL, видимость и целевое окно
добавить пробел
Если отмечено, это добавит немного пространства между стандартными значками шапки Discourse и пользовательскими значками, добавленными через этот компонент
SVG-значки
Включить классы значков FontAwesome 6 для каждого значка, используемого в списке.
Значками могут быть любые значки FontAwesome 6 (бесплатные), указанные без префиксов fa-, fab-, fas- или far-, либо URL-адрес изображения.
Если значок, который вы хотите использовать, не отображается, добавьте его в настройку svg_icons в компоненте. Если вы добавляете новые значки, они должны иметь префиксы FontAwesome 6, такие как fab, far и fas.
У меня возникла аналогичная проблема, о которой упоминали несколько человек выше: иконка не отображается, но кнопку всё ещё можно нажать. Я внес изменения в настройку иконки, указав, например, «fab-facebook-f» вместо просто «facebook-f». Для Twitter и моего другого сайта проблем нет, но для Facebook и LinkedIn это по-прежнему не работает.
Я разобрался с Facebook, но LinkedIn всё ещё не получается. Также есть ли способ создать пользовательскую иконку? Могу ли я загрузить логотип своей компании и использовать его в качестве иконки?
А, это действительно решило проблему. Да, очень запутанно. Переименование было бы отличным решением!
РЕДАКТИРОВАНИЕ: В недавнем обновлении также, похоже, незаметно изменили имя класса Discord, добавив в него префикс fab- (например, если вы хотите изменить цвет иконок; это было бы отличной нативной функцией для @OP — довольно трудно было заметить).
Конечно, в этой теме есть раздел о добавлении пользовательских иконок.
После настройки вы сможете использовать любые пользовательские иконки, добавленные в этот компонент темы. Пожалуйста, ознакомьтесь с этим и дайте знать, если возникнут какие-либо проблемы.
Я внес это изменение вместе с несколькими другими улучшениями реализации здесь
Новое обновление добавляет уникальные префиксированные классы к каждой ссылке на основе используемого вами заголовка. Таким образом, например, если вы используете
Спасибо за вашу помощь. Я пробовал использовать «fab-linkedin» в категориях «Ссылки в заголовке» и «SVG-иконки». Как видно на скриншоте, по какой-то причине это всё ещё не работает.
Поскольку вы наш клиент, я зашел на ваш сайт, проверил его и исправил проблему за вас. Я обновил компонент темы и настроил правильные параметры для иконок — теперь они должны работать без сбоев.
Ещё один вопрос/запрос: изначально эти ссылки открывались в отдельной вкладке, но теперь они открываются в той же. Настройка уже установлена на «blank», как ещё можно это изменить?
Действительно. Я случайно упустил атрибут target в последних изменениях.
С вашей стороны никаких действий не требуется. Я исправил компонент и обновил его на вашем сайте. Так что всё должно быть готово. Спасибо за сообщение об ошибке
Я могу заставить работать некоторые иконки версии 4.7.0 из Font Awesome Icons, просто введя их название (например, car) в соответствующем разделе «Ссылки в заголовке». Некоторые иконки не отображаются (например, fa-comments-o). Для некоторых не нужно использовать «SVG-иконки» (например, home), а для некоторых это требуется (например, car).
Ни одна из иконок версии 5, которые я пробовал из Find Icons with the Perfect Look & Feel | Font Awesome, не заработала. Я вставлял имена с префиксом fa- в разделы «Ссылки в заголовке» и «SVG-иконки», но безрезультатно. Однако иконки fab-facebook (и другие), которые были там по умолчанию, работают.
Что я делаю не так?
Редактирование: Я исправил первый абзац для большей точности.
Большое спасибо за это, @Johani. Работает как по маслу и даёт мне «эстетичное» решение для ссылки «вернуться на сайт» (в моём случае).Однако я столкнулся с проблемой, так как также использую компонент Боковое гамбургер-меню на мобильных устройствах, из-за чего всё в этой части .d-header ломается