WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#27844 closed enhancement (fixed)

Create new dashicons (4.0)

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

Download all attachments as: .zip

Change History (63)

#1 @celloexpressions
3 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
3 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
3 years ago

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

#4 @slaFFik
3 years ago

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

#5 follow-up: @protechig
3 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 3 years ago by protechig (previous) (diff)

@liljimmi
3 years ago

Recipe card dashicon

#6 follow-up: @liljimmi
3 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
3 years ago

Carrot dasicon to represent food-related CPTs, etc.

@liljimmi
3 years ago

Store or shop dashicon

#7 in reply to: ↑ 6 ; follow-up: @ocean90
3 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
3 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
3 years ago

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

@liljimmi
3 years ago

Building Dashicon

@liljimmi
3 years ago

Design for a building dashicon

@zookatron
3 years ago

Calendar Icon Adobe Illustrator File

@zookatron
3 years ago

Calendar Icon PNG File

#9 follow-up: @zookatron
3 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
3 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
3 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
3 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
3 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
3 years ago

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

#15 follow-up: @EmpireOfLight
3 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
3 years ago

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

I will try to re-do those other 2.

#17 @iseulde
3 years ago

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

#18 follow-up: @melchoyce
3 years ago

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

#19 @michel.weimerskirch
3 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
3 years ago

Replying to melchoyce:

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

We will at my WordCamp session tomorrow!

@liljimmi
3 years ago

New building Dashicon AI file

@liljimmi
3 years ago

New building Dashicon PNG file

#21 @liljimmi
3 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
3 years ago

New shop Dashicon AI file

@liljimmi
3 years ago

New shop Dashicon PNG file

#22 @liljimmi
3 years ago

Uploaded a new version of the Shop Dashicon

@liljimmi
3 years ago

Record

#23 @liljimmi
3 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
3 years ago

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

#25 follow-up: @bfintal
3 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
3 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
3 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
3 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
3 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
3 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
3 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
3 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
3 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
3 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
3 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
3 years ago

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

#37 in reply to: ↑ 35 ; follow-up: @EmpireOfLight
3 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
3 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
3 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
3 years ago

Store on the right pixel grid

#40 in reply to: ↑ 39 @liljimmi
3 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
3 years ago

2nd version of record Dashicon

@liljimmi
3 years ago

2nd version of record Dashicon - AI file

#41 @liljimmi
3 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
3 years ago

Fontsquirrel zip of fonts , svg and css

#42 @EmpireOfLight
3 years ago

OK, got it to commit

#43 @iseulde
3 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
2 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
2 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
2 years ago

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

Note: See TracTickets for help on using tickets.