This component includes a theme setting that allows you to add as many links as you want, determine their icons, and decide which devices they show up on!
Name
Descriptions
header links
List of links with the following properties: title, icon, URL, view and target
add whitespace
If checked, this will add some whitespace between the default Discourse header icons and the custom icons added via this component
Svg icons
Include FontAwesome 6 icon classes for each icon used in the list.
Icons can be any FontAwesome 6 (free) icon name without the fa- ‘fab-’ ‘fas-’ or ‘far-’ parts or an URL to an image.
If the icon you want to use does not show up, then add it to the svg_icons setting in the component. If you add new icons, they need to be prefixed with FontAwesome 6 prefixes like fab, far and 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 ломается
