WordPress.org

Making WordPress.org

Opened 3 weeks ago

Last modified 10 days ago

#5014 new enhancement

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

Reported by: dufresnesteven Owned by:
Milestone: Priority: normal
Component: Developer Hub Keywords: needs-design
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 (1)

icon_resize.png (138.3 KB) - added by dufresnesteven 3 weeks ago.
Here's a quick attempt at a larger item in the grid.

Download all attachments as: .zip

Change History (5)

#1 @dd32
3 weeks 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 3 weeks ago by dd32 (previous) (diff)

#2 @dufresnesteven
3 weeks 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
3 weeks ago

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

#3 @dd32
3 weeks 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
10 days ago

  • Component changed from General to Developer Hub
Note: See TracTickets for help on using tickets.