Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 7 years ago

#26936 closed task (blessed) (fixed)

Create new dashicons

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

Change History (88)

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


11 years ago

#2 @nacin
11 years 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.)

#3 @netweb
11 years 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/

@melchoyce
11 years ago

#4 follow-up: @melchoyce
11 years 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?"

#5 in reply to: ↑ 4 @ocean90
11 years ago

  • Milestone changed from Awaiting Review to 3.9

Replying to melchoyce:

Without.

#6 @nacin
11 years 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.

#8 @nacin
11 years ago

Much better!

@melchoyce
11 years ago

Updated code, line break, and paragraph icons

#9 @EmpireOfLight
11 years ago

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

#10 follow-up: @EmpireOfLight
11 years ago

Just added the bbPress logo-got the vector.

#11 in reply to: ↑ 10 @netweb
11 years ago

Replying to EmpireOfLight:

Just added the bbPress logo-got the vector.

Thank You :)

#12 @nacin
11 years ago

In 27061:

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

props empireoflight, melchoyce.
see #26936.

#13 in reply to: ↑ description ; follow-up: @Kelderic
11 years 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 11 years ago by Kelderic (previous) (diff)

#14 in reply to: ↑ 13 @helen
11 years ago

Replying to Kelderic:

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

#15 @Kelderic
11 years 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 11 years ago by SergeyBiryukov (previous) (diff)

#16 @jeremyfelt
11 years ago

  • Component changed from Administration to General
  • Focuses administration added

#17 @danielmilner
11 years 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/

#18 follow-up: @voltronik
11 years 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 11 years ago by voltronik (previous) (diff)

#19 in reply to: ↑ 18 @melchoyce
11 years 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?

#20 @Ipstenu
11 years ago

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

We have these:

  • dashicons-smartphone
  • dashicons-cart

#21 @voltronik
11 years 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.

#22 @TobiasBg
11 years ago

#27049 was marked as a duplicate.

@melchoyce
11 years ago

#23 @melchoyce
11 years ago

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

#24 @scamartist26
11 years ago

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

#25 follow-up: @melchoyce
11 years ago

Updated dashicons files: dashicons-update_2-13.zip

Version 0, edited 11 years ago by melchoyce (next)

#26 @firebird75
11 years 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!

#27 in reply to: ↑ 25 ; follow-up: @ocean90
11 years 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.

#28 in reply to: ↑ 27 ; follow-up: @melchoyce
11 years 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.

#29 in reply to: ↑ 28 @ocean90
11 years 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. :)

#30 @EmpireOfLight
11 years ago

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

#31 in reply to: ↑ description @liljimmi
11 years 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!

#32 @nacin
11 years ago

  • Type changed from feature request to task (blessed)

#33 @EmpireOfLight
11 years ago

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

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


11 years ago

#35 @hearvox
11 years 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.

#36 @melchoyce
11 years 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.

#37 follow-up: @melchoyce
11 years 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.

#38 in reply to: ↑ 37 @liljimmi
11 years 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!!

#39 @melchoyce
11 years 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?

@melchoyce
11 years ago

@melchoyce
11 years ago

#40 @melchoyce
11 years 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.

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


11 years ago

#42 @nacin
11 years ago

In 27468:

Widgets dashicons update.

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

#43 follow-up: @netweb
11 years ago

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

#44 in reply to: ↑ 43 ; follow-up: @helen
11 years 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?

#45 follow-up: @EmpireOfLight
11 years 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 11 years ago by SergeyBiryukov (previous) (diff)

#46 in reply to: ↑ 44 @netweb
11 years 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.

#47 @hearvox
11 years ago

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

@Harold Angenent
11 years ago

Backwards compatibility for Trash dashicon in 3.8

#48 @Harold Angenent
11 years 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.

#49 in reply to: ↑ 45 @melchoyce
11 years 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.

#50 @melchoyce
11 years 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)

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


11 years ago

#52 @melchoyce
11 years 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)

#53 @melchoyce
11 years 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.

#54 @anonymized_10765487
11 years 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.

#55 @melchoyce
11 years 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.

#56 @iseulde
11 years ago

Another request: a table icon to use in TinyMCE.

@netweb
11 years ago

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

@melchoyce
11 years ago

@melchoyce
11 years ago

#57 @melchoyce
11 years 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 11 years ago by melchoyce (previous) (diff)

#58 @melchoyce
11 years ago

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

#59 @ocean90
11 years ago

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

@melchoyce
11 years ago

#60 @melchoyce
11 years 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

#61 @ocean90
11 years 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.

#62 @helgatheviking
11 years 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?

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


11 years ago

#65 @nacin
11 years ago

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

@melchoyce
11 years ago

@melchoyce
11 years ago

#66 @melchoyce
11 years 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.

#67 @ocean90
11 years 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.

#68 @ocean90
11 years ago

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

#69 @ocean90
11 years 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.

This ticket was mentioned in Slack in #buddypress by netweb. View the logs.


9 years ago

This ticket was mentioned in Slack in #bbpress by netweb. View the logs.


9 years ago

This ticket was mentioned in Slack in #design-dashicons by netweb. View the logs.


7 years ago

Note: See TracTickets for help on using tickets.