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 18 months ago.
26936-2.ai (348.9 KB) - added by melchoyce 18 months ago.
Updated code, line break, and paragraph icons
widgeticons.ai (363.3 KB) - added by melchoyce 17 months ago.
dashicons-update_2-13.zip (235.1 KB) - added by melchoyce 17 months ago.
26936.diff (202.8 KB) - added by melchoyce 16 months ago.
fonts.zip (105.7 KB) - added by melchoyce 16 months ago.
bbpress-dashicons.css.patch (564 bytes) - added by netweb 16 months ago.
26936.2.diff (337 bytes) - added by Harold Angenent 16 months ago.
Backwards compatibility for Trash dashicon in 3.8
dashicons-arrows.ai (367.5 KB) - added by melchoyce 16 months ago.
dashicons-media-final.ai (381.7 KB) - added by melchoyce 16 months ago.
WP Sticky.PNG (4.5 KB) - added by netweb 16 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 16 months ago.
26936.3.diff (218.7 KB) - added by melchoyce 16 months ago.
26936.4.diff (218.7 KB) - added by melchoyce 16 months ago.
fonts.3.zip (92.4 KB) - added by melchoyce 15 months ago.
26936.5.diff (75.6 KB) - added by melchoyce 15 months ago.

Change History (85)

comment:1 @ircbot18 months ago

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

comment:2 @nacin18 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 @netweb18 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/

@melchoyce18 months ago

comment:4 follow-up: @melchoyce18 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 @ocean9018 months ago

  • Milestone changed from Awaiting Review to 3.9

Replying to melchoyce:

Without.

comment:6 @nacin18 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 @nacin18 months ago

Much better!

@melchoyce18 months ago

Updated code, line break, and paragraph icons

comment:9 @EmpireOfLight17 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: @EmpireOfLight17 months ago

Just added the bbPress logo-got the vector.

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

Replying to EmpireOfLight:

Just added the bbPress logo-got the vector.

Thank You :)

comment:12 @nacin17 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: @Kelderic17 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 17 months ago by Kelderic (previous) (diff)

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

Replying to Kelderic:

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

comment:15 @Kelderic17 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 16 months ago by SergeyBiryukov (previous) (diff)

comment:16 @jeremyfelt17 months ago

  • Component changed from Administration to General
  • Focuses administration added

comment:17 @danielmilner17 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: @voltronik17 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 17 months ago by voltronik (previous) (diff)

comment:19 in reply to: ↑ 18 @melchoyce17 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 @Ipstenu17 months ago

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

We have these:

  • dashicons-smartphone
  • dashicons-cart

comment:21 @voltronik17 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 @TobiasBg17 months ago

#27049 was marked as a duplicate.

@melchoyce17 months ago

comment:23 @melchoyce17 months ago

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

comment:24 @scamartist2617 months ago

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

comment:25 follow-up: @melchoyce17 months ago

Updated dashicons files: dashicons-update_2-13.zip

Courtesy of empireoflight.

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

comment:26 @firebird7517 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: @ocean9017 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: @melchoyce17 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 @ocean9017 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 @EmpireOfLight17 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 @liljimmi16 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 @nacin16 months ago

  • Type changed from feature request to task (blessed)

comment:33 @EmpireOfLight16 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 @ircbot16 months ago

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

comment:35 @hearvox16 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 @melchoyce16 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: @melchoyce16 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 @liljimmi16 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 @melchoyce16 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?

@melchoyce16 months ago

@melchoyce16 months ago

comment:40 @melchoyce16 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 @ircbot16 months ago

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

comment:42 @nacin16 months ago

In 27468:

Widgets dashicons update.

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

comment:43 follow-up: @netweb16 months ago

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

comment:44 in reply to: ↑ 43 ; follow-up: @helen16 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: @EmpireOfLight16 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 16 months ago by SergeyBiryukov (previous) (diff)

comment:46 in reply to: ↑ 44 @netweb16 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 @hearvox16 months ago

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

@Harold Angenent16 months ago

Backwards compatibility for Trash dashicon in 3.8

comment:48 @Harold Angenent16 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 @melchoyce16 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 @melchoyce16 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 @ircbot16 months ago

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

@melchoyce16 months ago

comment:52 @melchoyce16 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 @melchoyce16 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 @jmlapam16 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 @melchoyce16 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 @iseulde16 months ago

Another request: a table icon to use in TinyMCE.

@netweb16 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)

@melchoyce16 months ago

@melchoyce16 months ago

comment:57 @melchoyce16 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 16 months ago by melchoyce (previous) (diff)

comment:58 @melchoyce16 months ago

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

comment:59 @ocean9016 months ago

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

@melchoyce16 months ago

comment:60 @melchoyce16 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 @ocean9016 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 @helgatheviking15 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 @ircbot15 months ago

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

comment:65 @nacin15 months ago

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

@melchoyce15 months ago

@melchoyce15 months ago

comment:66 @melchoyce15 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 @ocean9015 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 @ocean9015 months ago

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

comment:69 @ocean9015 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.