Context Navigation

← Previous Ticket
Next Ticket →

#5014 closed enhancement (fixed)

Add icon names to under dashicons so I can search using my browsers Ctrl + F function.

Reported by:	dufresnesteven	Owned by:	coffee2code
Milestone:		Priority:	normal
Component:	Developer Hub	Keywords:	needs-design needs-design-feedback
Cc:

Description (last modified by dd32)

On https://developer.wordpress.org/resource/dashicons/, add a label under the icon so I don't need to find the filter input and search there.

My expectation is that I can just use CTRL + F and type in "comments" and my browser will find any associated icons and jump me to that section on the page.

Example: https://themes-pixeden.com/font-demos/7-stroke/

Attachments (4)

icon_resize.png (138.3 KB) - added by dufresnesteven 5 years ago.: Here's a quick attempt at a larger item in the grid.
5014.diff (39.9 KB) - added by dufresnesteven 5 years ago.: Adds the icon name under the icon.
Screen Shot 2020-03-25 at 9.40.46 AM.png (250.3 KB) - added by dufresnesteven 5 years ago.: Current Layout
Screen Shot 2020-03-25 at 9.41.11 AM.png (262.9 KB) - added by dufresnesteven 5 years ago.: Updated in Diff.

Download all attachments as: .zip

Change History (17)

#1 @dd32
5 years ago

Description modified (diff)

The page is pretty space constrained due to the number of icons being displayed, and the small size of them.

Some of the class names are fairly long too, for example dashicons-welcome-add-page and dashicons-buddicons-buddypress-logo

The Filter box allows you to search the dashicons though.

edit: I'll mention that I've had the same problem a number of times, and have resorted to view-source and scrolling through the icons and their CSS classnames in order to figure out what an icons name is

Last edited 5 years ago by dd32 (previous) (diff)

#2 @dufresnesteven
5 years ago

Yeah, the namespace does make it challenging.

A bit of research notes for discussion:

Dashicons: https://developer.wordpress.org/resource/dashicons/

Emphasized Sections
Icon Container ( 68x68 )
13 icons per line @ 961px ( this being our desktop breakpoint )

Material Design Page: https://material.io/resources/icons/?style=baseline

De-emphasize section
Icon container ( 96x104 )
10 icons per line @ 961px

7 stroke Page: https://themes-pixeden.com/font-demos/7-stroke/

No sections
Icon containers ( 86 x 86 )
11 icons per line @ 961px

Font Awesome: https://fontawesome.com/icons?from=io

No sections
Icon containers ( 134 X 64 )
7 icons per line @ 961px

Thoughts/Suggestions

We appear to have smaller icon containers than the others. We could create more room for our longer classes by having less icons per line.
Based on the other tools, we may not need to separate out the icons into sections for readability. They all seem to have not went that route (not sure if that's better or worse UX).

@dufresnesteven
5 years ago

Attachment icon_resize.png added

Here's a quick attempt at a larger item in the grid.

#3 @dd32
5 years ago

Thanks for the follow up @dufresnesteven!

I think if we were to drop the dashicons- prefix from the displayed text (I think it's pretty fair that you'd want to copy it from the above section) it'd look nicer.

I agree, that'd be a nice change that I didn't think would really be viable. I think it's worth trialing with the actual dashicon names and going from there :)

#4 @coffee2code
5 years ago

Component changed from General to Developer Hub

@dufresnesteven
5 years ago

Attachment 5014.diff added

Adds the icon name under the icon.

@dufresnesteven
5 years ago

Attachment Screen Shot 2020-03-25 at 9.40.46 AM.png added

Current Layout

@dufresnesteven
5 years ago

Attachment Screen Shot 2020-03-25 at 9.41.11 AM.png added

Updated in Diff.

#5 @dufresnesteven
4 years ago

Keywords needs-design-feedback added

#6 follow-up: ↓ 7 @ryelle
4 years ago

There have been some icons added since the patch was created, so it doesn't apply cleanly anymore.

It would be nice for the label underneath to be human-friendly, like "WordPress", "WordPress (alt)" instead of wordpress, wordpress-alt. Also, the extra phrases in the div content (that were hidden) were also used for searching, so typing in "language" brings up the translation icon— we should keep that functionality.

#7 in reply to: ↑ 6 @dufresnesteven
4 years ago

Replying to ryelle:

Also, the extra phrases in the div content (that were hidden) were also used for searching, so typing in "language" brings up the translation icon— we should keep that functionality.

Yep, definitely. Missed that.