# Icona / Emoji dell'elemento Nav di Discourse

**URL:** <https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105>\
**Category:** Theme component\
**Created:** [27 Marzo 2024, 5:44am UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105 "2024-03-27T05:44:13Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [27 Marzo 2024, 5:44am UTC](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105/1 "2024-03-27T05:44:13Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Riepilogo** | Aggiungi Icona / Emoji prima dell’elemento di navigazione |
| 🛠 | **Repository** | [GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item](https://github.com/VaperinaDEV/discourse-nav-item-icon-emoji) |
| ❓ | **Guida all’installazione** | [Come installare un tema o un componente del tema](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **Nuovo ai temi di Discourse?** | [Guida per principianti all’uso dei temi di Discourse](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Installa questo componente del tema

Ciao 👋

Con questo componente del tema puoi aggiungere icone o emoji prima degli elementi di navigazione. Il componente del tema si basa su [Discourse Easy 'SVG Icon' and 'Emoji' in CSS](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656).

## `nav item prefix`

Questa impostazione può gestire anche icone ed emoji.

La regola da seguire è:

### Icona

Se vuoi aggiungere un’icona prima di un elemento di navigazione:  
`icon:nav-item:icon-set:icon-name:icon-color`

Per prima cosa devi definire il tipo che è `icon` se vuoi aggiungere un’icona prima dell’elemento di navigazione.

- **nav-item:** latest, hot, new, unread, categories ecc…
- **icon-set:** brands, regular, solid
- **icon-color:** `currentColor`, HEX o variabile di colore

**Ad esempio:**  
`icon:latest:solid:rocket:currentColor`  
`icon:top:regular:star:var(--gold)`  
`icon:unseen:solid:compass:#228C22`

![icon](https://global.discourse-cdn.com/meta/original/4X/d/c/9/dc903434b5d43fd45f7f4364c0e1954e26097ce1.png)

* * *

### Emoji

Se vuoi aggiungere un’emoji prima di un elemento di navigazione:  
`emoji:nav-item:emoji-set:emoji-name:filter`

Per prima cosa devi definire il tipo che è `emoji` se vuoi aggiungere un’emoji prima dell’elemento di navigazione.

- **nav-item:** latest, hot, new, unread, categories ecc…
- **emoji-set:** apple, google, twitter, win10, google\_classic, facebook\_messenger
- **filter:** Rende l’emoji di colore nero in modalità chiara e bianca in modalità scura. Se l’emoji è in hover o attiva, verrà visualizzata con una transizione. (opzionale)  
 ![emoji-filter](https://global.discourse-cdn.com/meta/original/4X/1/d/8/1d8934bb951bb321c35eacc29aa0316a7e579161.gif)

**Ad esempio:**  
`emoji:latest:twitter:rocket:filter`  
`emoji:top:google:star`  
`emoji:new:facebook_messenger:bell`

Navigazione Desktop

![emoji](https://global.discourse-cdn.com/meta/original/4X/9/3/c/93cd1efba9e28690772d0524497d80776e486579.png)

Navigazione Mobile

 ![Screenshot 2024-08-19 at 19.51.40](https://global.discourse-cdn.com/meta/original/4X/7/8/0/780293213491400cc8d6b6a40cacba7defd34a64.png)

---

_[View the full topic](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105)._