WordPress.org

Make WordPress Core

#26936 closed task (blessed) (fixed)

Create new dashicons

Reported by: melchoyce Owned by: melchoyce
Milestone: 3.9 Priority: normal
Severity: minor Version: 3.9
Component: General Keywords:
Focuses: ui, administration Cc:

Description

Let's use this ticket as a general Dashicons icon request ticket.

First requests:

Attachments (16)

26936-1.ai (355.5 KB) - added by melchoyce 14 months ago.
26936-2.ai (348.9 KB) - added by melchoyce 14 months ago.
Updated code, line break, and paragraph icons
widgeticons.ai (363.3 KB) - added by melchoyce 14 months ago.
dashicons-update_2-13.zip (235.1 KB) - added by melchoyce 14 months ago.
26936.diff (202.8 KB) - added by melchoyce 13 months ago.
fonts.zip (105.7 KB) - added by melchoyce 13 months ago.
bbpress-dashicons.css.patch (564 bytes) - added by netweb 13 months ago.
26936.2.diff (337 bytes) - added by Harold Angenent 13 months ago.
Backwards compatibility for Trash dashicon in 3.8
dashicons-arrows.ai (367.5 KB) - added by melchoyce 13 months ago.
dashicons-media-final.ai (381.7 KB) - added by melchoyce 13 months ago.
WP Sticky.PNG (4.5 KB) - added by netweb 12 months ago.
Can we get a 'Sticky' icon please :) (Adding said sticky icon to as a post-format icon is for another ticket another day)
fonts.2.zip (90.7 KB) - added by melchoyce 12 months ago.
26936.3.diff (218.7 KB) - added by melchoyce 12 months ago.
26936.4.diff (218.7 KB) - added by melchoyce 12 months ago.
fonts.3.zip (92.4 KB) - added by melchoyce 12 months ago.
26936.5.diff (75.6 KB) - added by melchoyce 12 months ago.

Change History (85)

comment:1 @ircbot14 months ago

This ticket was mentioned in IRC in #wordpress-dev by melchoyce. View the logs.

comment:2 @nacin14 months ago

Carriage return / line break is the same request.

Paragraph simply needs to be a copy of dashicons-editor-rtl, minus the right arrow. (That arrow can actually be cropped out, but that's hacky.)

comment:3 @netweb14 months ago

Can I request the bbPress icon if I can please :) We kind of missed/forgot about that until we found it wasn't there!

Just the round 'bb' logo part of the logo on the following page if that can be done, if not I'll ask @JJJ if he has any other source files we could use.

http://codex.bbpress.org/official-logos-and-icons/

@melchoyce14 months ago

comment:4 follow-up: @melchoyce14 months ago

26936-1.ai contains the following icons:
https://cloudup.com/cxQ9M85hEqU

I decided to try out two different options for "code", but we should only pick one of them. Which version (with the / or without) do you read more as "code?"

comment:5 in reply to: ↑ 4 @ocean9014 months ago

  • Milestone changed from Awaiting Review to 3.9

Replying to melchoyce:

Without.

comment:6 @nacin14 months ago

Yeah, I agree on the <>. Good call.

For the line break, I feel like it should have a shorter vertical line, a longer horizontal line, and a smaller arrow. I also have a general affinity for the "closed" arrow style used for undo/redo, and that seems more common for line break icons I could find.

comment:8 @nacin14 months ago

Much better!

@melchoyce14 months ago

Updated code, line break, and paragraph icons

comment:9 @EmpireOfLight14 months ago

https://github.com/melchoyce/dashicons has been updated. Is there a vector file for bbpress logo (I can make one if need be)

comment:10 follow-up: @EmpireOfLight14 months ago

Just added the bbPress logo-got the vector.

comment:11 in reply to: ↑ 10 @netweb14 months ago

Replying to EmpireOfLight:

Just added the bbPress logo-got the vector.

Thank You :)

comment:12 @nacin14 months ago

In 27061:

Update Dashicons to latest. Adds line break, paragraph, code, and bbPress.

props empireoflight, melchoyce.
see #26936.

comment:13 in reply to: ↑ description ; follow-up: @Kelderic14 months ago

Replying to melchoyce:

Let's use this ticket as a general Dashicons icon request ticket.

Got a few for consideration:

  • Telephone (Already have smartphone, so maybe that's enough)
  • Email (I thought we had this, but looking I can't find it now)
  • Printer (for Fax, but also could be used for Print)

I realize that the primary purpose of Dashicons is for the WordPress backend, but contact pages (and therefore icons) are common to the point of universal on websites. So even though a contact page is frontend, the number of people who would benefit justifies their being added in my opinion.

Last edited 14 months ago by Kelderic (previous) (diff)

comment:14 in reply to: ↑ 13 @helen14 months ago

Replying to Kelderic:

I think Genericons is more appropriate for that: http://genericons.com/

comment:15 @Kelderic14 months ago

Fair point, except that Genericons doesn't have a Print or Phone icon either. And given the previous discussion (#24864), Genericons are almost certainly not going to be added to the core. Dashicons, though, is in the core, and these icons have a such a broad use, why not? We already have two almost identical dashboard icons. (Dashboard and Performance).

Last edited 13 months ago by SergeyBiryukov (previous) (diff)

comment:16 @jeremyfelt14 months ago

  • Component changed from Administration to General
  • Focuses administration added

comment:17 @danielmilner14 months ago

One that I found myself looking for was a keyboard. Perhaps something similar to the one from Font Awesome.

http://fontawesome.io/icon/keyboard-o/

comment:18 follow-up: @voltronik14 months ago

I think mobile and some kind of identity icons would be useful.
The way I see it, dashicons goes beyond what core requires and should cater a little for plugins too.

Last edited 14 months ago by voltronik (previous) (diff)

comment:19 in reply to: ↑ 18 @melchoyce14 months ago

Replying to voltronik:

I think mobile, eCommerce and some kind of identity icons would be useful.
The way I see it, dashicons goes beyond what core requires and should cater a little for plugins too.

Can you elaborate a little on what you're imagining for mobile, eCommerce and identity icons?

comment:20 @Ipstenu14 months ago

For everyone trying to remember the URL: http://melchoyce.github.io/dashicons/

We have these:

  • dashicons-smartphone
  • dashicons-cart

comment:21 @voltronik14 months ago

You're absolutely right - I missed the cart icon completely.
I think the tablet and smartphone icons are good but at a glance, they could look a little like a new document image.

Some kind of identity icon like a t-shirt or something might be handy addition.

comment:22 @TobiasBg14 months ago

#27049 was marked as a duplicate.

@melchoyce14 months ago

comment:23 @melchoyce14 months ago

widgeticons.ai are some new icons that need to be added for the upcoming widget customizer merge.

comment:24 @scamartist2614 months ago

Octocat would be a great addition to the core set of social networks. https://github.com/logos

comment:25 follow-up: @melchoyce14 months ago

Updated dashicons files: dashicons-update_2-13.zip

Courtesy of empireoflight.

Last edited 14 months ago by melchoyce (previous) (diff)

comment:26 @firebird7513 months ago

Hello,

Some suggestions/requests of icons that would be usefull for plugins :

  • hotel icon
  • building icon
  • palm tree icon
  • plane icon

(for real estate, travel websites)

Thanks a lot!

comment:27 in reply to: ↑ 25 ; follow-up: @ocean9013 months ago

Replying to melchoyce:

Updated dashicons files: dashicons-update_2-13.zip

The classes from [27061] aren't yet added to dashicons.css in the GitHub repo. We should try to have both in sync.

comment:28 in reply to: ↑ 27 ; follow-up: @melchoyce13 months ago

Replying to ocean90:

Replying to melchoyce:

Updated dashicons files: dashicons-update_2-13.zip

The classes from [27061] aren't yet added to dashicons.css in the GitHub repo. We should try to have both in sync.

The classes from [27061] were added by Nacin to the GitHub repo in this commit:
https://github.com/melchoyce/dashicons/commit/cd4b9a7beedcbf6e127059ae57ffa631cab91b3e

We're holding off on updating the demo site because we don't want theme or plugin authors using new icons before they land in a release.

comment:29 in reply to: ↑ 28 @ocean9013 months ago

Replying to melchoyce:
Yes, that's right. But then dashicons-update_2-13.zip includes an old dashicon.css, see the diff:

 .dashicons-editor-removeformatting:before {
@@ -308,18 +308,7 @@
 	content:"\f320";
 }
 
-.dashicons-editor-break:before {
-	content:"\f474";
-}
 
-.dashicons-editor-code:before {
-	content:"\f475";
-}
-
-.dashicons-editor-paragraph:before {
-	content:"\f476";
-}
-
 /* Post Icons */

But I can also fetch the current version from GitHub, no need to attach a ZIP file then. But seems like widget icons aren't there yet or I have no idea what dashicons-update_2-13.zip is for. :)

comment:30 @EmpireOfLight13 months ago

The latest dashicons have text widget (unif478), tag cloud (unif479) and archive (unif480). See https://cloudup.com/csIDKxcLgyE for a visual reference.

comment:31 in reply to: ↑ description @liljimmi13 months ago

Replying to melchoyce:

Let's use this ticket as a general Dashicons icon request ticket.

I am always in need of food-related icons for CPTs

  • Apple or other fruit or vegetable
  • Store or stand (represents a shop or market vendor)
  • Recipe card (a card with a tab and writing on it - can have multiple uses)

Thank you!

comment:32 @nacin13 months ago

  • Type changed from feature request to task (blessed)

comment:33 @EmpireOfLight13 months ago

Can someone post a concise list of all edits needed for dashicons? I'll jump on it as soon as I have one.

comment:34 @ircbot13 months ago

This ticket was mentioned in IRC in #wordpress-dev by melchoyce. View the logs.

comment:35 @hearvox13 months ago

  • Severity changed from normal to minor

Love Dashicons, but can't use them on our pubmedia sites b/c we really need a non-music audio icon -- like a speaker. A speaker icon could also serve as a button for triggering a volume control, which I don't believe any current Dashicon is suited for. Thanks for considering.

comment:36 @melchoyce13 months ago

Hey empireoflight, I'm going to try to make a list tonight of everything we need to do around dashicons before 3.9 is released.

comment:37 follow-up: @melchoyce13 months ago

Also — thank you to everyone who has made icon suggestions recently. I'm going to play with some of these ideas and try to get them in for 3.9.1.

comment:38 in reply to: ↑ 37 @liljimmi13 months ago

Replying to melchoyce:

Also — thank you to everyone who has made icon suggestions recently. I'm going to play with some of these ideas and try to get them in for 3.9.1.

That is fantastic, thank you!!

comment:39 @melchoyce13 months ago

As far as I can tell, this is where we're at for pre-3.9 work:

Ben

  • Add new profiles.wordpress.org icons to dashicons font
  • Add new media icons to dashicons font (Mel will post asap, once finalized in #26650)
  • After new icons are added to the font, update the dashicons repo

Mel

  • Update dashicons repo and core to include updates from dashicons-update_2-13.zip, including new classes for text widget, tag cloud, and archive
  • Update core to include most recent font files (with new media & profiles icons) once Ben commits them to the dashicons repo
  • Add new classes to both dashicons repo and core for new profiles.wordpress.org icons
  • Add new classes to both dashicons repo and core for new media icons

Am I missing anything?

@melchoyce13 months ago

@melchoyce13 months ago

comment:40 @melchoyce13 months ago

26936.diff adds the updated font files from dashicons-update_2-13.zip, along with new classes for the widget icons: .dashicons-archive, .dashicons-text, and and .dashicons-tagcloud. In this patch, I've also updated the customizer widgets css file to include the new icons. fonts.zip contains the font files by themselves.

comment:41 @ircbot13 months ago

This ticket was mentioned in IRC in #wordpress-dev by nacin. View the logs.

comment:42 @nacin13 months ago

In 27468:

Widgets dashicons update.

props melchoyce, michael-arestad, empireoflight.
see #26936.

comment:43 follow-up: @netweb13 months ago

In bbpress-dashicons.css.patch: Added bbPress CSS classes

comment:44 in reply to: ↑ 43 ; follow-up: @helen13 months ago

Replying to netweb:

In bbpress-dashicons.css.patch: Added bbPress CSS classes

We had originally left them out to "protect" them. Does this make bbPress's life easier with registering menu pages, though?

comment:45 follow-up: @EmpireOfLight13 months ago

Sorry I've been awol on this. Trying to guage what needs to be done-here's a screenshot of the latest dashicons.glyphs file I have locally:
https://cloudup.com/cZOiWAKvjsu

I also had some Jen Mylo Skype requests which I'll sum up here (my comments in parenthesis):

clipboard - organizers (unif481)
microphone - speakers (unif482)
universal access icon - accessiblity (unif483)
plugins and themes icons with a checkmark for the theme/plugin review teams (unif485, not sure what to do for themes icon with checkmark; please advise)
a name badge like hello my name is but just stylized - attendees of events (unif484)
and something to represent design (vs themes), open to ideas on metaphor. things we've used in the past = artist's paintbrush (vs housepainter like themes), crayon, palette, etc (we already have unif309 pallette which could work for this)
-tweaking the eye (make less creepy, like in genericons)

  • tweaking the new brackets in trunk [mel] wanted to have be less steep/more in style of others (not sure which icon this is)

I'm also still unsure of which media icons from #26650 to add into the file. Let me know.

Last edited 13 months ago by SergeyBiryukov (previous) (diff)

comment:46 in reply to: ↑ 44 @netweb13 months ago

Replying to helen:

We had originally left them out to "protect" them.

That makes sense

Does this make bbPress's life easier with registering menu pages, though?

bbPress is fine and the menu icons are fully implemented.

So ignore the patch and I'll do what I wanted to do the 'other' way.

comment:47 @hearvox13 months ago

Micophone (unif482) looks great. Wlll be very helpful: thanks.

@Harold Angenent13 months ago

Backwards compatibility for Trash dashicon in 3.8

comment:48 @Harold Angenent13 months ago

26936.2.diff adds backwards compatibility for third party themes and plugins using the Trash icon in 3.8. Right now the update to 3.9 will break those icons and there is no reliable way to prepare for 3.9.

comment:49 in reply to: ↑ 45 @melchoyce13 months ago

Replying to EmpireOfLight:

Sorry I've been awol on this. Trying to guage what needs to be done-here's a screenshot of the latest dashicons.glyphs file I have locally:
https://cloudup.com/cZOiWAKvjsu

I also had some Jen Mylo Skype requests which I'll sum up here (my comments in parenthesis):

clipboard - organizers (unif481)
microphone - speakers (unif482)
universal access icon - accessiblity (unif483)
plugins and themes icons with a checkmark for the theme/plugin review teams (unif485, not sure what to do for themes icon with checkmark; please advise)
a name badge like hello my name is but just stylized - attendees of events (unif484)
and something to represent design (vs themes), open to ideas on metaphor. things we've used in the past = artist's paintbrush (vs housepainter like themes), crayon, palette, etc (we already have unif309 pallette which could work for this)
-tweaking the eye (make less creepy, like in genericons)

Hey Ben, thanks for these new icons — they look great.

I chatted a bit with Jen the other day and we both agreed that the microphone here makes us think less of speakers and more of a computer microphone/recording microphone, and realized the megaphone icon being used for WordCamps is actually exactly what we need: https://cloudup.com/cumZQfTgFOO Any way we can get that one included in Dashicons? (We could probably add all of the WordCamp-specific icons, and just not make helper classes for them like we do with the bbs). The microphone icon you made it great and has a wide range of use cases, so we should keep that one as well.

Jen and I also chatted about the design icon, and she thinks the current icon (the painter's palette) is hard to understand out of context, especially since it doesn't have any dots of paint on it. That's why she was leaning towards an artist's brush. I personally prefer the artist's paintbrush idea over crayons, which seems childish.

For the theme/plugin icons — I think instead of making new icons, we should just tile a check icon onto the plugin/theme icons using css. That'll allow us greater flexibility, and we won't have to worry about fitting everything into 20x20px. Our current checkmark is small enough that it might work as-is?

The new eye looks GREAT!

tweaking the new brackets in trunk [mel] wanted to have be less steep/more in style of others (not sure which icon this is)

Now I can't remember which icon I was talking about, either. Oops. Maybe the code icon? I think I want to modify it to be a little thicker, anyway — if feels pretty wimpy next to the other icons: https://cloudup.com/cJQse8sGVCK I made the version used in the media icon a little larger, so I'll probably do the same for the current dashicon.

I'm also still unsure of which media icons from #26650 to add into the file. Let me know.

Still working on that one — will let you know asap.

comment:50 @melchoyce13 months ago

Some more ideas for a "design" icon: crossed pencil/ruler, bezier curve with drag anchors (like these: http://thumb10.shutterstock.com/display_pic_with_logo/448066/124815883/stock-vector-graphic-design-icons-124815883.jpg)

comment:51 @ircbot13 months ago

This ticket was mentioned in IRC in #wordpress-dev by melchoyce. View the logs.

@melchoyce13 months ago

comment:52 @melchoyce13 months ago

dashicons-arrows.ai is an updated version of the .dashicons-arrow-[x]-alt and .dashicons-arrow-[x]-alt2 classes. These new icons should replace the old ones in the font file so they retain their existing character code. Additionally, I've included a new icon in the file — "move" — which will be used for customizer widgets. (Related: #27400)

comment:53 @melchoyce13 months ago

dashicons-media-final.ai contains the new media icons discussed in #26650. Additionally, it contains an updated version of the code icon, which should replace the icon used in .dashicons-editor-code.

comment:54 @jmlapam12 months ago

  • Summary changed from Create new dashicons to Create new dashicons for social share

Hi,

Thanks for the great font. I'm using it in a plugin for the frontend . I was told about "missing" social icons such as pinterest, github, etc.

I think it would be relevant to add them.

comment:55 @melchoyce12 months ago

  • Summary changed from Create new dashicons for social share to Create new dashicons

Thanks for the great font. I'm using it in a plugin for the frontend . I was told about "missing" social icons such as pinterest, github, etc. I think it would be relevant to add them.

As discussed here: https://github.com/melchoyce/dashicons/issues/12, since dashicons wad built for the back-end of WordPress (wp-admin), we haven't included a lot of social icons. So far, we've only included social icons that we can see a big use case for within the plugin or CPT ecosystem. We're willing to make more if there's a huge demand for it on the back-end, but we won't be adding more to support usage on the front-end.

comment:56 @iseulde12 months ago

Another request: a table icon to use in TinyMCE.

@netweb12 months ago

Can we get a 'Sticky' icon please :) (Adding said sticky icon to as a post-format icon is for another ticket another day)

@melchoyce12 months ago

@melchoyce12 months ago

comment:57 @melchoyce12 months ago

26936.3.diff introduces the following new icons/classes:

  • 482: .dashicons-microphone
  • 483: .dashicons-universal-access
  • 486: .dashicons-tickets
  • 484: .dashicons-nametag
  • 481: .dashicons-organizer
  • 487: .dashicons-sponsor
  • 488: .dashicons-speaker
  • 489: .dashicons-sessions
  • 501: .dashicons-media-archive
  • 500: .dashicons-media-audio
  • 499: .dashicons-media-code
  • 498: .dashicons-media-default
  • 497: .dashicons-media-document
  • 496: .dashicons-media-interactive
  • 495: .dashicons-media-spreadsheet
  • 491: .dashicons-media-text
  • 490: .dashicons-media-video
  • 492: .dashicons-playlist-audio
  • 493: .dashicons-playlist-video
  • 502: .dashicons-plus-alt
  • 503: .dashicons-randomize

Additionally, the following icons have been updated:

  • 462: .dashicons-googleplus (fixes #26851)
  • 177: .dashicons-visibility

The new font files can be found in fonts.2.zip.

Core team, let me know if you have issues with any of these new class names.

Still to-do:

  • Update the arrow icons (52)
  • Add the new "move" icon (52)
  • Update the code icon (53)
Last edited 12 months ago by melchoyce (previous) (diff)

comment:58 @melchoyce12 months ago

FYI, the updated arrows/code and new move icons look like this: https://cloudup.com/ccmag2T2vET

comment:59 @ocean9012 months ago

I noticed that dashicons-plus-alt is off by 1px https://cloudup.com/cXqlQhHTpsw

@melchoyce12 months ago

comment:60 @melchoyce12 months ago

Chatted with some people in IRC and we decided to make the WordCamp icons more literal. 26936.4.diff updates the class names:

.dashicons-organizer -> .dashicons-clipboard
.dashicons-sponsor -> .dashicons-heart
.dashicons-speaker -> .dashicons-megaphone
.dashicons-sessions -> .dashicons-schedule

comment:61 @ocean9012 months ago

In 27705:

Update Dashicons.

  • Includes new Media icons, see #26650.
  • Includes icons for clipboard, megaphone, schedule, tickets, nametag, universal-access, microphone and <3.
  • Includes icon for randomize, see #21785.
  • Updates Google+ icon, fixes #26851.

props melchoyce, empireoflight.
see #26936.

comment:62 @helgatheviking12 months ago

@melchoyce I was going to suggest a "move" icon until I saw this thread. However, from your sample, I can't tell which is supposed to be the move icon. Might I suggest using something similar to the grab cursor?

comment:63 @ircbot12 months ago

This ticket was mentioned in IRC in #wordpress-dev by ocean90. View the logs.

comment:65 @nacin12 months ago

  • Owner set to melchoyce
  • Status changed from new to assigned

@melchoyce12 months ago

@melchoyce12 months ago

comment:66 @melchoyce12 months ago

26936.5.diff adds:

  • 504: .dashicons-external
  • 506: .dashicons-editor-contract
  • 507: .dashicons-universal-access-alt

It also replaces:

  • 475: .dashicons-code
  • 483: .dashicons-universal-access
  • All of the .dashicons-arrow-x-alt icons
  • All of the .dashicons-arrow-x-alt2 icons

New font files contained in fonts.3.zip. Thanks @empireoflight for new icons, replacing the older icons with their updated versions, and recompiling the font.

comment:67 @ocean9012 months ago

In 27989:

Update Dashicons.

New icons: .dashicons-external, .dashicons-editor-contract and .dashicons-universal-access-alt.
Updated icons: .dashicons-code, .dashicons-universal-access, .dashicons-arrow-x-alt and .dashicons-arrow-x-alt2.
Restores also .dashicons-post-trash as an alias for .dashicons-trash, which is the new one.

props melchoyce, empireoflight.
see #26936.

comment:68 @ocean9012 months ago

Re [27989]: .dashicons-code is .dashicons-editor-code.

comment:69 @ocean9012 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

Fixed for 3.9.

melchoyce will sum up a new ticket for the next round.

Cool icons we have.

Note: See TracTickets for help on using tickets.