# Alterar ícones de navegação para palavras

**URL:** <https://meta.discourse.org/t/changing-navigation-icons-to-words/117040>\
**Category:** UX\
**Created:** [Maio 7, 2019, 7:36am UTC](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040 "2019-05-07T07:36:51Z")\
**Posts on this page:** 1\
**Showing post:** 5

<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:** [Maio 7, 2019, 1:51pm 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.

---

_[View the full topic](https://meta.discourse.org/t/changing-navigation-icons-to-words/117040)._