# 将导航图标更改为文字

**URL:** <https://meta.discourse.org/t/changing-navigation-icons-to-words/117040>\
**Category:** UX\
**Created:** [2019年五月7日 07:36 UTC](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040 "2019-05-07T07:36:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahmadabdolsaheb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmadabdolsaheb/32/138662_2.png) [@ahmadabdolsaheb](https://meta.discourse.org/u/ahmadabdolsaheb)\
**Post date:** [2019年五月7日 07:36 UTC](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040/1 "2019-05-07T07:36:51Z")

</div>

Hello community,

I am trying to replace the navigation icons with words for medium and large viewports.

Any feedback is appreciated.

Thank you

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2019年五月7日 08:15 UTC](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040/2 "2019-05-07T08:15:12Z")

</div>

It’s not entirely clear what you’re asking for here. Can you please add some screenshots / mockups of what you’re referring to?

---

<div class="post-metadata">

**Author:** ![ahmadabdolsaheb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmadabdolsaheb/32/138662_2.png) [@ahmadabdolsaheb](https://meta.discourse.org/u/ahmadabdolsaheb)\
**Post date:** [2019年五月7日 08:24 UTC](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040/3 "2019-05-07T08:24:35Z")

</div>

@Johani, thanks for the quick reply.  
I want to replace these two icons with words such as search and menu.

 ![28%20AM](https://global.discourse-cdn.com/meta/original/3X/0/b/0bbb656efd8ba7312737cb452479dad54fd83877.png)

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2019年五月7日 11:49 UTC](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040/4 "2019-05-07T11:49:21Z")

</div>

Right but.. why? Now you have to localize those words, and they likely won’t fit on mobile.

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2019年五月7日 13:51 UTC](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040/5 "2019-05-07T13:51:25Z")

</div>

On mobile you can’t use text because of space, on desktop you can try to use words even if it’s not the best.

![image](https://global.discourse-cdn.com/meta/original/3X/5/4/54c6775645be3768a2bf7253004877f066350e4c.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/b/2b7897b4306f4fbed0ef8829763bdee0a239f400.png)

Create a new theme component and add _only_ in the **Desktop \> CSS** tab:

```css
#search-button:before {
  content: "Search";
  color: #7c7c7c;
  font-weight: bold;
}

.fa.d-icon.d-icon-search.svg-icon.svg-node {
  color: transparent;
}

#toggle-hamburger-menu:before {
  content: "Menu";
  color: #7c7c7c;
  font-weight: bold;
}

.fa.d-icon.d-icon-bars.svg-icon.svg-node {
  color: transparent;
}

.d-header-icons .icon {
  &:hover, &:focus {
    background-color: transparent;
  }
}

#toggle-hamburger-menu:hover:active, 
#search-button:hover:active, 
.header-dropdown-toggle,
#toggle-hamburger-menu, 
#search-button {
  padding-left: 35px;
}

```

Remember to add the component to the active theme(s) on your site.

You can customize the CSS as you like but IMHO the icons are always the best choice.

---

<div class="post-metadata">

**Author:** ![ahmadabdolsaheb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmadabdolsaheb/32/138662_2.png) [@ahmadabdolsaheb](https://meta.discourse.org/u/ahmadabdolsaheb)\
**Post date:** [2019年五月8日 07:41 UTC](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040/6 "2019-05-08T07:41:01Z")

</div>

@codinghorror @dax thank you for your reply.  
I agree with you about small screens. Since the design has not been finalized yet, I will make sure to take your feedback into account before shipping. 🙏

---

<div class="post-metadata">

**Author:** ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)\
**Post date:** [2019年五月8日 11:02 UTC](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040/7 "2019-05-08T11:02:17Z")

</div>

Is this an accessibility issue? If so, is it for people using screen readers or screen magnifiers? If it’s the former night there be a way to leave the icon on the page but provide text for the screen reader?

If this is to improve accessibility then it would make sense to see that the words use could be localized.