Make WordPress Core

Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#27844 closed enhancement (fixed)

Create new dashicons (4.0)

Reported by: melchoyce's profile melchoyce Owned by:
Milestone: 4.0 Priority: low
Severity: minor Version:
Component: General Keywords: needs-patch
Focuses: ui, administration Cc:

Description

This thread is a continuation of #26936, for the 4.0 release cycle.

Remaining requests from the 3.9 ticket:

  • Icons for real estate or travel websites (hotel, building, palm tree, and/or plane)
  • Icons for food-related CPTs (fruit/vegetable, stand/store for market vendor, recipe card)
  • "Sticky" icon for posts
  • "Move" icon

Attachments (17)

dashicons-recipe card.ai (54.2 KB) - added by liljimmi 11 years ago.
Recipe card dashicon
dashicons-carrot.ai (59.3 KB) - added by liljimmi 11 years ago.
Carrot dasicon to represent food-related CPTs, etc.
dashicons-store.ai (56.9 KB) - added by liljimmi 11 years ago.
Store or shop dashicon
recipe-food-shop.png (1.7 KB) - added by liljimmi 11 years ago.
The 3 dashicons I designed: Recipe card, Food & Shop
dashicons-building.ai (59.6 KB) - added by liljimmi 11 years ago.
Building Dashicon
dashicon-building.png (195 bytes) - added by liljimmi 11 years ago.
Design for a building dashicon
calendar.ai (218.3 KB) - added by zookatron 11 years ago.
Calendar Icon Adobe Illustrator File
calendar.png (1.1 KB) - added by zookatron 11 years ago.
Calendar Icon PNG File
dashicons-building.2.ai (51.3 KB) - added by liljimmi 11 years ago.
New building Dashicon AI file
building.png (194 bytes) - added by liljimmi 11 years ago.
New building Dashicon PNG file
dashicons-store.2.ai (52.2 KB) - added by liljimmi 11 years ago.
New shop Dashicon AI file
shop.png (390 bytes) - added by liljimmi 11 years ago.
New shop Dashicon PNG file
record.png (466 bytes) - added by liljimmi 11 years ago.
Record
dashicons-store-goodone.ai (52.6 KB) - added by liljimmi 10 years ago.
Store on the right pixel grid
record-alt.png (663 bytes) - added by liljimmi 10 years ago.
2nd version of record Dashicon
dashicons-record-alt.ai (55.8 KB) - added by liljimmi 10 years ago.
2nd version of record Dashicon - AI file
webfontkit-20140819-123447.zip (129.0 KB) - added by EmpireOfLight 10 years ago.
Fontsquirrel zip of fonts , svg and css

Download all attachments as: .zip

Change History (63)

#1 @celloexpressions
11 years ago

The following icons would be needed to really make #27516 cool (all of these in the context of a video/audio player):

  • Play
  • Pause
  • Volume
  • Muted

#2 @rhyswynne
11 years ago

It would be quite handy to have a ticket icon without the WordPress logo. Tried creating one myself, failing miserably!

#3 @StressFree Sites
11 years ago

Would love a telephone, and a email sign(either an envelope or @ sign)

#4 @slaFFik
11 years ago

What about BuddyPress icon?
And in general all major Automattic products mini-logos.

#5 follow-up: @protechig
11 years ago

I think it would be useful if you added icons for all of the major social networks here. I'm mainly referring to the lack of a linkedin icon. While it's obviously not essential to the core UI, the other Social Networks are there. I'm building a plugin and i'd like to be able to just enqeue dashicons instead of rolling my own custom icon font/genericons.

Last edited 11 years ago by protechig (previous) (diff)

@liljimmi
11 years ago

Recipe card dashicon

#6 follow-up: @liljimmi
11 years ago

I uploaded a design for a recipe card dashicon, it could also double as an index card, rolodex-looking card, etc.

This is my first time taking a crack at one of these, so I hope the format is ok :-)

@liljimmi
11 years ago

Carrot dasicon to represent food-related CPTs, etc.

@liljimmi
11 years ago

Store or shop dashicon

#7 in reply to: ↑ 6 ; follow-up: @ocean90
11 years ago

Replying to liljimmi:
When uploading an .ai file can you please provide a .png file too? Thanks.

#8 in reply to: ↑ 7 @liljimmi
11 years ago

Replying to ocean90:

Replying to liljimmi:
When uploading an .ai file can you please provide a .png file too? Thanks.

No problem! Would you like me to upload 3 separate pngs or 1 with all 3? Thanks!

@liljimmi
11 years ago

The 3 dashicons I designed: Recipe card, Food & Shop

@liljimmi
11 years ago

Building Dashicon

@liljimmi
11 years ago

Design for a building dashicon

@zookatron
11 years ago

Calendar Icon Adobe Illustrator File

@zookatron
11 years ago

Calendar Icon PNG File

#9 follow-up: @zookatron
11 years ago

I have a design for a calendar icon that I think would be useful to have access to.
Calendar Icon PNG File

As a developer that would like to help contribute to WordPress development more, is there any way I can help incorporate these changes into the repository? From studying the GitHub repository a bit it seems as though the workflow is adding the new icons using the Glyphs editor, exporting the font to various formats using FontSquirrel, and updating the css files with the new icons. Is this correct?

#10 in reply to: ↑ 9 ; follow-ups: @melchoyce
11 years ago

Replying to zookatron:

I have a design for a calendar icon that I think would be useful to have access to.
Calendar Icon PNG File

Hey there,

We already have a .dashicons-calendar icon (https://cloudup.com/cl4FokqRZMB), but I'm happy to make alternate version with more rows if that what you're looking for. How about something like this? https://cloudup.com/c5BdHpA-eqn

As a developer that would like to help contribute to WordPress development more, is there any way I can help incorporate these changes into the repository? From studying the GitHub repository a bit it seems as though the workflow is adding the new icons using the Glyphs editor, exporting the font to various formats using FontSquirrel, and updating the css files with the new icons. Is this correct?

Unfortunately, that is correct. It's a pretty convoluted and unfriendly process. What I'd ideally like to do is use something like http://fontcustom.com/ to compile the font instead directly from svgs, but I just haven't had time to investigate that. If you or anyone else is interested in taking a look, I can export a bunch for dashicons to svg for testing.

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

Replying to melchoyce:

We already have a .dashicons-calendar icon (https://cloudup.com/cl4FokqRZMB), but I'm happy to make alternate version with more rows if that what you're looking for. How about something like this? https://cloudup.com/c5BdHpA-eqn

+1 to that.

#12 in reply to: ↑ 10 @zookatron
11 years ago

Replying to melchoyce:

We already have a .dashicons-calendar icon (https://cloudup.com/cl4FokqRZMB), but I'm happy to make alternate version with more rows if that what you're looking for. How about something like this? https://cloudup.com/c5BdHpA-eqn

Oh sorry, I'm not sure how I missed that when I was looking through the icons. That should work fine then, although I do kind of like the second design you have there better though :P Thanks for the help.

#13 in reply to: ↑ 5 @acafourek
11 years ago

Replying to protechig:

I think it would be useful if you added icons for all of the major social networks here. I'm mainly referring to the lack of a linkedin icon. While it's obviously not essential to the core UI, the other Social Networks are there. I'm building a plugin and i'd like to be able to just enqeue dashicons instead of rolling my own custom icon font/genericons.

Agreed on LinkedIn - my use case is for creating Settings panels (as I am currently working on one). I think every site I've created in the past few years has needed a "Social Links" settings section for clients to provide URLs or usernames to any number of social sites. Since I'm thinking not for users but for the site/company, facebook, twitter and google+ cover most bases but LinkedIn would be a great addition. I think lower priorities might be YouTube/Vimeo

#14 @liljimmi
11 years ago

Hi there. Is there any feedback on the 4 proposed Dashicons I mocked up? Thanks!

#15 follow-up: @EmpireOfLight
11 years ago

Hey @liljimmi,
I added the carrot (nice one!) and the recipe card to the latest dashicons repo: https://github.com/melchoyce/dashicons
The other ones weren't aligned properly to the pixel grid. They have to be designed on a 20x20 grid with snap to grid turned on, otherwise the vertical/horizontal edges are blurry.

#16 in reply to: ↑ 15 @liljimmi
11 years ago

Awesome, thank you! This made my day :-)

I will try to re-do those other 2.

#17 @iseulde
11 years ago

I think a exclamation mark would be useful (!). We already have (?) and (i).

#18 follow-up: @melchoyce
11 years ago

Making a note here: we should make an album/record icon.

#19 @michel.weimerskirch
11 years ago

Given that social icons are a very common need, I think that in addition to the existing Facebook, G+ and Twitter icons, a few other common ones like YouTube and Vimeo should be added as well.

#20 in reply to: ↑ 18 @EmpireOfLight
11 years ago

Replying to melchoyce:

Making a note here: we should make an album/record icon.

We will at my WordCamp session tomorrow!

@liljimmi
11 years ago

New building Dashicon AI file

@liljimmi
11 years ago

New building Dashicon PNG file

#21 @liljimmi
11 years ago

After watching @EmpireOfLight's Dashicon presentation at WCNYC (and getting some help) I've gotten my Dashicon act together and re-did the building one. I'm still working on the shop.

@liljimmi
11 years ago

New shop Dashicon AI file

@liljimmi
11 years ago

New shop Dashicon PNG file

#22 @liljimmi
11 years ago

Uploaded a new version of the Shop Dashicon

@liljimmi
11 years ago

Record

#23 @liljimmi
11 years ago

Took a crack at the record. It doesn't look great when I test it on the Dashboard, but I figure it's a start.

#24 @benjaminprojas
11 years ago

It would be neat to include icons for different currencies. Such as $, €, £ etc.

#25 follow-up: @bfintal
11 years ago

How about alert and warning icons.

A loading icon to replace the current gif loading icon would be nice.

#26 in reply to: ↑ 25 ; follow-ups: @celloexpressions
11 years ago

  • Keywords needs-patch added

Are we actually planning on making any new dashicons/updating dashicons in 4.0? This ticket isn't on the milestone yet and will get missed.

Replying to bfintal:

A loading icon to replace the current gif loading icon would be nice.

We could then use CSS animations to animate the icon too, rather than using the gif (which can't be re-colored and thus causes issues in some contexts).

#27 in reply to: ↑ 26 ; follow-up: @bfintal
11 years ago

Replying to celloexpressions:

Replying to bfintal:

A loading icon to replace the current gif loading icon would be nice.

We could then use CSS animations to animate the icon too, rather than using the gif (which can't be re-colored and thus causes issues in some contexts).

Exactly!

#28 in reply to: ↑ 27 ; follow-up: @EmpireOfLight
11 years ago

Replying to bfintal:

Replying to celloexpressions:

Replying to bfintal:

A loading icon to replace the current gif loading icon would be nice.

We could then use CSS animations to animate the icon too, rather than using the gif (which can't be re-colored and thus causes issues in some contexts).

Exactly!

I think there are concerns about resource hits and page load times with anything but an animated gif. Maybe @joen can chime in on this.

#29 in reply to: ↑ 26 @liljimmi
11 years ago

Replying to celloexpressions:

Are we actually planning on making any new dashicons/updating dashicons in 4.0? This ticket isn't on the milestone yet and will get missed.

Yes, I am wondering about this as well.

#30 in reply to: ↑ 26 ; follow-up: @ocean90
11 years ago

  • Milestone changed from Future Release to 4.0
  • Priority changed from normal to low

Replying to celloexpressions:

Are we actually planning on making any new dashicons/updating dashicons in 4.0? This ticket isn't on the milestone yet and will get missed.

I think the time for making new icons is over, but we should get in the four new icons, see https://github.com/melchoyce/dashicons/issues/30.

#31 in reply to: ↑ 28 @celloexpressions
11 years ago

Replying to EmpireOfLight:

I think there are concerns about resource hits and page load times with anything but an animated gif. Maybe @joen can chime in on this.

Since dashicons would be loaded anyway, it should be less resource-intensive in terms of loading it. The animation itself would be more resource-intensive for the browser, depending on the browser, depending on how good its css animations rendering engine is. Either way, I'm thinking we wouldn't do that by default, but rather introduce it so that it can be used as an alternative for situations where a different color or size is needed. And that wouldn't be a 4.0 thing, either way.

Once the new icons get in, let's summarize all requests on this ticket and move them to a new one for 4.1, hopefully with some clearer guidelines for suggestions and potential contributions, and clearly stated deadlines.

#32 in reply to: ↑ 30 @liljimmi
10 years ago

Replying to ocean90:

I think the time for making new icons is over, but we should get in the four new icons, see https://github.com/melchoyce/dashicons/issues/30.

I submitted a pull request :-)

#33 @ocean90
10 years ago

In 29520:

Dashicons: Update to the latest dashicons files.

New icons:

  • .dashicons-calendar-alt (f508)
  • .dashicons-carrot (f511)
  • .dashicons-grid-view (f509)
  • .dashicons-index-card (f510)

props liljimmi, melchoyce, empireoflight.
see #27844.

#34 follow-up: @ocean90
10 years ago

@EmpireOfLight and melchoyce: What's the state of the shop, building and record icon from liljimmi? Otherwise I would like to close this ticket for 4.0.

#35 in reply to: ↑ 34 ; follow-up: @liljimmi
10 years ago

Replying to ocean90:

@EmpireOfLight and melchoyce: What's the state of the shop, building and record icon from liljimmi? Otherwise I would like to close this ticket for 4.0.

I don't think the record is ready for prime time, but what do you guys think about the shop and building, @EmpireOfLight?

#36 @EmpireOfLight
10 years ago

I say we add 'em. I'll update dashicons this AM.

#37 in reply to: ↑ 35 ; follow-up: @EmpireOfLight
10 years ago

Replying to liljimmi:

Replying to ocean90:

@EmpireOfLight and melchoyce: What's the state of the shop, building and record icon from liljimmi? Otherwise I would like to close this ticket for 4.0.

I don't think the record is ready for prime time, but what do you guys think about the shop and building, @EmpireOfLight?

I can't find vectors for record or shop on this ticket-@liljimmi can you add them?

#38 in reply to: ↑ 37 ; follow-up: @liljimmi
10 years ago

Replying to EmpireOfLight:

I can't find vectors for record or shop on this ticket-@liljimmi can you add them?

It's this one: https://core.trac.wordpress.org/attachment/ticket/27844/dashicons-store.2.ai

I didn't make a .ai for the record yet, I can work on it now :-)

#39 in reply to: ↑ 38 ; follow-up: @EmpireOfLight
10 years ago

Replying to liljimmi:

Replying to EmpireOfLight:

I can't find vectors for record or shop on this ticket-@liljimmi can you add them?

It's this one: https://core.trac.wordpress.org/attachment/ticket/27844/dashicons-store.2.ai

I didn't make a .ai for the record yet, I can work on it now :-)

See https://core.trac.wordpress.org/ticket/27844#comment:15 I need the one we worked on at WordCamp NYC!

@liljimmi
10 years ago

Store on the right pixel grid

#40 in reply to: ↑ 39 @liljimmi
10 years ago

Replying to EmpireOfLight:

See https://core.trac.wordpress.org/ticket/27844#comment:15 I need the one we worked on at WordCamp NYC!

Oh, weird! Maybe I uploaded the wrong one. I uploaded it again.

@liljimmi
10 years ago

2nd version of record Dashicon

@liljimmi
10 years ago

2nd version of record Dashicon - AI file

#41 @liljimmi
10 years ago

I made a second version of the record Dashicon. The jacket cover is more off-screen to show the center of the record so people can tell what it's supposed to be.

@EmpireOfLight
10 years ago

Fontsquirrel zip of fonts , svg and css

#42 @EmpireOfLight
10 years ago

OK, got it to commit

#43 @iseulde
10 years ago

I know I'm a bit late for this in this ticket, but earlier I suggested creating a table icon for TinyMCE. Not that it would be used in core this cycle, but it would definitely be useful for plugins adding the table plugin and the TinyMCE icon *is* in core.

Ideally there should be a dashicon variant for each icon in the TinyMCE icon font. Then we can just replace all icons with CSS, including the table icon.

https://core.trac.wordpress.org/ticket/26936#comment:56

#44 follow-up: @helen
10 years ago

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

Sounds like there's still some back and forth here, but let's close this off for 4.0 and start afresh for 4.1 at this point, please.

#45 in reply to: ↑ 44 @liljimmi
10 years ago

Replying to helen:

Sounds like there's still some back and forth here, but let's close this off for 4.0 and start afresh for 4.1 at this point, please.

Here is an inventory of requested icons to be moved to a 4.1 ticket. Let me know if I missed anything.

  • Icons for real estate or travel websites - hotel, palm tree or plane
  • "Sticky" icon for posts
  • "Move" icon
  • Video/audio player icons - Play, pause, volume & muted
  • Ticket icon without the WordPress logo
  • Telephone and email (using the @ sign) icons
  • BuddyPress icon and all major Automattic products mini-logos
  • LinkedIn and other missing social network icons
  • Exclamation mark icon
  • Icons for different currencies. Such as $, €, £ etc.
  • A loading icon to replace the current gif loading icon (still in debate)
  • A table icon for TinyMCE and a dashicon variant for each icon in the TinyMCE icon font.

#46 @melchoyce
10 years ago

Thanks @liljimmi! Moved the proposed icons over to #29444 for 4.1.

Note: See TracTickets for help on using tickets.