# Иконка/эмодзи пункта навигации Discourse
**URL:** https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105
**Category:** Theme component
**Created:** [27.Март.2024 05:44:13 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105 "2024-03-27T05:44:13Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [27.Март.2024 05:44:13 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/1 "2024-03-27T05:44:13Z")
| | | |
| --- | --- | --- |
| ℹ | **Сводка** | Добавить иконку/эмодзи перед элементом навигации |
| 🛠 | **Репозиторий** | [GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item · GitHub](https://github.com/VaperinaDEV/discourse-nav-item-icon-emoji) |
| ❓ | **Руководство по установке** | [Как установить тему или компонент темы](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **Новичок в темах Discourse?** | [Начинающее руководство по использованию тем Discourse](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Установить этот компонент темы
Привет 👋
С помощью этого компонента темы вы можете добавлять иконки или эмодзи перед элементами навигации. Компонент темы основан на [Discourse Easy 'SVG Icon' and 'Emoji' in CSS](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656).
## `префикс элемента навигации`
Этот параметр также поддерживает иконки и эмодзи.
Правило, которое необходимо соблюдать:
### Иконка
Если вы хотите добавить иконку перед элементом навигации:
`icon:nav-item:icon-set:icon-name:icon-color`
Сначала укажите тип `icon`, если хотите добавить иконку перед элементом навигации.
- **nav-item:** latest, hot, new, unread, categories и т.д.
- **icon-set:** brands, regular, solid
- **icon-color:** `currentColor`, HEX-код или переменная цвета
**Например:**
`icon:latest:solid:rocket:currentColor`
`icon:top:regular:star:var(--gold)`
`icon:unseen:solid:compass:#228C22`
* * *
### Эмодзи
Если вы хотите добавить эмодзи перед элементом навигации:
`emoji:nav-item:emoji-set:emoji-name:filter`
Сначала укажите тип `emoji`, если хотите добавить эмодзи перед элементом навигации.
- **nav-item:** latest, hot, new, unread, categories и т.д.
- **emoji-set:** apple, google, twitter, win10, google\_classic, facebook\_messenger
- **filter:** Делает эмодзи чёрным в светлой теме и белым в тёмной. При наведении или активации эмодзи плавно раскрывается (опционально).
**Например:**
`emoji:latest:twitter:rocket:filter`
`emoji:top:google:star`
`emoji:new:facebook_messenger:bell`
Навигация на компьютере
Навигация на мобильном устройстве
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [16.Август.2024 20:42:31 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/2 "2024-08-16T20:42:31Z")
Очень круто, Дон! Есть ли надежда, что это заработает с [FontAwesome Pro](https://meta.discourse.org/t/discourse-fontawesome-pro/150871)? Я использую светлые иконки…
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [17.Август.2024 04:37:58 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/3 "2024-08-17T04:37:58Z")
Да, я думаю, это возможно, но, к сожалению, у меня нет доступа к набору иконок Pro. Это работает с SVG-иконками, так что если у вас есть к ним доступ, то всё должно сработать. Нужно немного доработать компонент и добавить эти SVG-файлы. После этого вы сможете использовать их через настройки. Также важно уточнить юридические аспекты использования SVG-иконок Pro на веб-сайте, в чём я не уверен.
---
### Author:  [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [17.Август.2024 13:54:03 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/4 "2024-08-17T13:54:03Z")
Почему нет продолжения обсуждения 🤣 ? По каждой теме, которую ты создаёшь, я хочу получать уведомление! Как говорит сам термин… ТЫ РАЗБИВАЕШЬ РЕКОРДЫ!
---
### Author:  [@sheng\_hualuo](https://meta.discourse.org/u/sheng_hualuo)
#### Post date: [18.Август.2024 10:16:16 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/5 "2024-08-18T10:16:16Z")
После обновления Discourse на мобильном устройстве не отображается иконка, что вызывает путаницу. У кого-то ещё возникла такая же проблема??
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [18.Август.2024 15:22:46 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/6 "2024-08-18T15:22:46Z")
Похоже, на скриншоте отображается десктопная версия (судя по иконке «гамбургер» в левом углу), но у меня компонент работает на мобильном устройстве. 🤔
---
### Author:  [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [18.Август.2024 15:45:52 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/7 "2024-08-18T15:45:52Z")
Я согласен с тем, что говорит @sheng_hualuo о новой навигации (выпадающий список); она не отображается.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [18.Август.2024 15:49:22 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/8 "2024-08-18T15:49:22Z")
А, я вижу это и в выпадающем списке. 🤔
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [18.Август.2024 15:50:00 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/9 "2024-08-18T15:50:00Z")
Да, извините, этот компонент темы и другие мои компоненты, которые модифицировали панель навигации, требуют обновления из-за этого изменения: [DEV: replace list control nav dropdown with DMenuMobile (#28324) · discourse/discourse@931485b · GitHub](https://github.com/discourse/discourse/commit/931485b7c10dd61407697228c6a7fdc70c4f192d). Я думаю над решением. Мы можем легко нацелиться на элементы навигации в модальном окне, но у выбранного элемента, к сожалению, нет специфического класса, и, думаю, нам придется отказаться от десктопной навигации в компонентах.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [19.Август.2024 17:54:52 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/10 "2024-08-19T17:54:52Z")
Привет 👋
Я внес обновление в этот компонент.
1. Удаляет версию навигации для настольных компьютеров на мобильных устройствах
2. Добавляет совместимость с новой мобильной навигацией
К сожалению, мы не можем добавить это здесь, так как у этого раздела нет специального класса для элемента навигации.
>
>
> 1. removes desktop navigation version on mobile
> 2. adds compatibility to the ne…w mobile navigation
---
### Author:  [@sheng\_hualuo](https://meta.discourse.org/u/sheng_hualuo)
#### Post date: [21.Август.2024 02:07:34 UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/11 "2024-08-21T02:07:34Z")
Спасибо большое за исправление, но мне очень жаль, что функция для версии для настольных компьютеров была удалена, так как она отлично смотрится на моём сайте.