Changing navigation icons to words

Contribute UX

AI-generated summary

The discussion revolves around replacing navigation icons with words for medium and large viewports. ahmadabdolsaheb is seeking feedback on this approach. Johani requests clarification and screenshots, which ahmadabdolsaheb provides.

codinghorror expresses concerns about the need for localization and potential issues on mobile devices. dax provides an alternative solution using a theme component with CSS to display words on desktop while keeping icons on mobile. They also mention that icons are often the best choice.

ahmadabdolsaheb acknowledges the concerns and agrees to consider them before finalizing the design. pfaffman raises the question of whether this is an accessibility issue and suggests exploring ways to provide text for screen readers while keeping icons visible.

1

Hello community,

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

Any feedback is appreciated.

Thank you

2

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

4 Likes
3

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

28%20AM
28%20AM288×432 13.3 KB

4

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

6 Likes
5

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

image
image376×197 7.06 KB

Create a new theme component and add only in the Desktop > CSS tab:

#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.

7 Likes
6

@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. :pray:

3 Likes
7

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.

2 Likes