# Как добавить иконку в ссылку навигации?

**URL:** https://meta.discourse.org/t/how-to-add-an-icon-in-a-navigation-link/225024
**Category:** Support
**Created:** [22.Апрель.2022 11:45:47 UTC](https://meta.discourse.org/t/how-to-add-an-icon-in-a-navigation-link/225024 "2022-04-22T11:45:47Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [22.Апрель.2022 11:45:48 UTC](https://meta.discourse.org/t/how-to-add-an-icon-in-a-navigation-link/225024/1 "2022-04-22T11:45:48Z")

</div>

Я хочу добавить иконку Font Awesome перед словом «Чат» здесь:

![image](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/4X/2/6/6/26601696e5faf35772485f7f2355bf9c58223260.png)

Как это можно сделать?

Примечание: Я использую [Custom Top Navigation Links](https://meta.discourse.org/t/custom-top-navigation-links/87225) для этой кнопки.

---

<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: [22.Апрель.2022 16:38:59 UTC](https://meta.discourse.org/t/how-to-add-an-icon-in-a-navigation-link/225024/2 "2022-04-22T16:38:59Z")

</div>

Здравствуйте,

Может быть, что-то вроде этого для заголовка рабочего стола?

Вы можете изменить целевую навигацию, изменив строку `document.querySelector('#navigation-bar li a[href="/chat"]');`, чтобы она указывала на правильный путь `a[href="..."]`.

Также вы можете изменить иконку, изменив `comment` в вызове `iconHTML('comment');`.

![Screenshot 2022-04-22 at 18.43.45](https://global.discourse-cdn.com/meta/original/4X/2/e/4/2e4e0b4786201f26ff0066db4de5ed574ea99918.png)

```javascript
<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    const { iconHTML } = require("discourse-common/lib/icon-library");
    const navItem = document.querySelector('#navigation-bar li a[href="/chat"]');

    let icon = iconHTML('comment');
       
    if (navItem) {
      navItem.insertAdjacentHTML('afterbegin', icon)
    }
  });
</script>

```

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [22.Апрель.2022 16:45:52 UTC](https://meta.discourse.org/t/how-to-add-an-icon-in-a-navigation-link/225024/3 "2022-04-22T16:45:52Z")

</div>

Отлично!

(По крайней мере 20 символов)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [22.Май.2022 16:46:24 UTC](https://meta.discourse.org/t/how-to-add-an-icon-in-a-navigation-link/225024/4 "2022-05-22T16:46:24Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.