Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#29444 closed enhancement (fixed)

Create new dashicons (4.1)

Reported by: melchoyce's profile melchoyce Owned by: ocean90's profile ocean90
Milestone: 4.1 Priority: high
Severity: normal Version:
Component: Administration Keywords:
Focuses: ui Cc:

Description (last modified by melchoyce)

This thread is a continuation of #27844 and #26936, for the 4.1 release cycle.

The following icons have been proposed:

  • 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
  • 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.
  • A filter icon

Disclaimer: not all of these ideas might make it into Dashicons.

If anyone feels super passionate about an idea, feel free to do as @liljimmi did in 4.0 and try your hand at icon design. Here's a great place to start. @empireoflight has also put together a video tutorial.

Attachments (20)

dashicons-image-alignment.ai (620.5 KB) - added by melchoyce 10 years ago.
dashicons-image-alignment.jpg (11.1 KB) - added by melchoyce 10 years ago.
dashicons-image-alignment.2.ai (624.3 KB) - added by melchoyce 10 years ago.
dashicons-media-player.ai (391.9 KB) - added by melchoyce 10 years ago.
dashicons-media-player.png (959 bytes) - added by melchoyce 10 years ago.
dashicons-image-alignment.3.ai (626.3 KB) - added by melchoyce 10 years ago.
Screen Shot 2014-11-10 at 12.56.02 PM.png (5.5 KB) - added by melchoyce 10 years ago.
dashicons-new_11-10-14.ai (361.5 KB) - added by melchoyce 10 years ago.
dashicons-new_11-10-14.png (1.6 KB) - added by melchoyce 10 years ago.
dashicons-media-player.2.ai (397.4 KB) - added by melchoyce 10 years ago.
dashicons-tickets-alt.ai (61.6 KB) - added by liljimmi 10 years ago.
Tickets without the WordPress logo
tickets-alt.png (1.0 KB) - added by liljimmi 10 years ago.
Tickets without the WordPress logo - PNG
dashicons-phone.ai (57.1 KB) - added by liljimmi 10 years ago.
Phone
phone.png (721 bytes) - added by liljimmi 10 years ago.
Phone - PNG
dashicons-money.ai (51.7 KB) - added by liljimmi 10 years ago.
Generic money Dashicon
money.png (660 bytes) - added by liljimmi 10 years ago.
Generic money Dashicon - PNG
dashicons.zip (2.3 MB) - added by EmpireOfLight 10 years ago.
New dashicons fonts, uniF515–unif531. Player controls, tickets, phone, money, palm tree, image alignment icons added
29444.patch (63.6 KB) - added by ocean90 10 years ago.
dashicons.css
before.png (59.5 KB) - added by ocean90 10 years ago.
after.png (58.8 KB) - added by ocean90 10 years ago.

Change History (71)

#1 @melchoyce
10 years ago

  • Description modified (diff)

#2 @liljimmi
10 years ago

I have a couple questions:

  • What happened to the few Dashicons we tried to hustle to get into 4? Will they be added to 4.1?
  • For Dashicon requests that are just a character (!, $, €, £ etc.) is there a font we base them on?

I'm going to take a crack at the telephone icon.

Last edited 10 years ago by liljimmi (previous) (diff)

#3 follow-up: @EmpireOfLight
10 years ago

We should set a limited number of new icons (maybe 4 or 5) and do a poll/rating or something. It would help if developers chimed in on how big we should let Dashicons get. Whattaya think?

Last edited 10 years ago by EmpireOfLight (previous) (diff)

#4 in reply to: ↑ 3 @liljimmi
10 years ago

Replying to EmpireOfLight:

We should set a limited number of new icons (maybe 4 or 5) and do a poll/rating or something. It would help if developers chimed in on how big we should let Dashicons get. Whattaya think?

Sounds good!

#5 @EmpireOfLight
10 years ago

Update: I posted a poll for this at https://bendunkle.wordpress.com/2014/09/18/vote-for-the-next-dashicon/
I'll be demoing a design at WSCF this Oct. and this will help me pick a good one.

#6 follow-up: @benoitchantre
10 years ago

Would it be possible to add an animal icon (for zoo websites, pet shops, ...)?

#7 in reply to: ↑ 6 ; follow-up: @EmpireOfLight
10 years ago

Replying to benoitchantre:

Would it be possible to add an animal icon (for zoo websites, pet shops, ...)?

There's an "other" field at the bottom of the poll where you can add this.

Last edited 10 years ago by EmpireOfLight (previous) (diff)

#8 in reply to: ↑ 7 @benoitchantre
10 years ago

Replying to EmpireOfLight:

Replying to benoitchantre:

Would it be possible to add an animal icon (for zoo websites, pet shops, ...)?

There's an "other" field at the bottom of the poll where you can add this.

Thanks. I have submitted this idea in the poll.

#9 @Offereins
10 years ago

In addition to the suggestion of different currency icons, a more general universal currency/money symbol might be a valuable addition. This may look like a coin or a set of coins.

#10 @geminorum
10 years ago

Please consider adding helper classes for rotation and flipping, mainly for RTL purposes.
Also, I've just posted an issue for Genericons with example classes here : https://github.com/Automattic/Genericons/issues/52

#11 @bobbingwide
10 years ago

Has anyone requested a separate icon for WordPress MultiSite?
If not, I'd like to, but I'm not offering a design for it.

I was also considering asking about icons to represent CSS ( e.g. {} ) and shortcodes e.g. [] ).
But I realised that I could just use the actual characters without too much hassle.

.dashicons-css:before {
        content: "{}";
}
.dashicons-shortcode:before {
        content: "[]";
}

Which makes me wonder why we need dashicons for £ $ €
Am I missing something?

#12 @miss_jwo
10 years ago

An map pin with the WordPress logo within it please. Something like https://www.dropbox.com/s/irudg18amiee7c5/2014-10-28%2017.54.26.jpg?dl=0

#13 @melchoyce
10 years ago

dashicons-image-alignment.ai are three updated icons, meant to replace the existing dashicons-align-left, dashicons-align-right, and dashicons-align-center.

This ticket was mentioned in Slack in #feature-imageflow by melchoyce. View the logs.


10 years ago

#15 @melchoyce
10 years ago

Updated the alignment icons, including a replacement for dashicons-align-none, based on a slack conversation in #feature-imageflow. Preview:

https://cldup.com/UE91fYi2Un.png

#16 @melchoyce
10 years ago

dashicons-media-player.ai introduces a set of audio/video control icons.

#17 @melchoyce
10 years ago

One more update to alignment.

#18 @melchoyce
10 years ago

dashicons-new_11-10-14.ai is my take on image filter, warning, table, filter, and sticky post.

This ticket was mentioned in Slack in #core by ocean90. View the logs.


10 years ago

#20 @melchoyce
10 years ago

Made some minor adjustments to the media player icons in dashicons-media-player.2.ai.

#21 @melchoyce
10 years ago

New icons for 4.1:

  • Building
  • Store
  • Album
  • Media player icons (play, pause, fast forward, rewind, skip forward, skip back, volume on, volume off, repeat)

Updated icons for 4.1:

  • Image alignment (align left, align right, align center, align none)

Image filter, warning, table, filter, and sticky post might need a second look and/or some adjustments from @empireoflight before they're added. If these don't make it in to 4.1, that's probably okay. We'll be looking at a new, better way to create dashicons next cycle, and if these don't make it in, they'll be a good first batch for the new process.

This ticket was mentioned in Slack in #core by melchoyce. View the logs.


10 years ago

#23 @tberneman
10 years ago

I would like a PDF icon as well as a page icon that wasn't filled/solid like the Dashicons '\f498' is (something like Noticons '\f443'). Also a paperclip and a light bulb with rays to indicate it's on (this would complement Dashicons '\f339').

@liljimmi
10 years ago

Tickets without the WordPress logo

@liljimmi
10 years ago

Tickets without the WordPress logo - PNG

#24 @liljimmi
10 years ago

I made a generic version of the tickets Dashicon without the WordPress logo.

@liljimmi
10 years ago

Phone

@liljimmi
10 years ago

Phone - PNG

#25 @liljimmi
10 years ago

I made a phone. I'm not 100% happy with it. It started looking like a rotated briefcase handle from staring at it for too long.

@liljimmi
10 years ago

Generic money Dashicon

@liljimmi
10 years ago

Generic money Dashicon - PNG

#26 follow-up: @ocean90
10 years ago

  • Keywords needs-patch added

dashicons-building, dashicons-store, and dashicons-album are already in the font, yes? Can I commit these or do we wait for the new ones?

#27 @liljimmi
10 years ago

  • Keywords needs-patch removed

Took a crack at a Generic money Dashicon. I think it may need more things to indicate that it's money and not a square thought bubble :-)

#28 in reply to: ↑ 26 @liljimmi
10 years ago

Replying to ocean90:

dashicons-building, dashicons-store, and dashicons-album are already in the font, yes? Can I commit these or do we wait for the new ones?

The code is there, but I think the icons themselves have not been converted yet.

#29 @EmpireOfLight
10 years ago

Working on this now...

@EmpireOfLight
10 years ago

New dashicons fonts, uniF515–unif531. Player controls, tickets, phone, money, palm tree, image alignment icons added

#30 follow-up: @melchoyce
10 years ago

New dashicons fonts, uniF515–unif531. Player controls, tickets, phone, money, palm tree, image alignment icons added

Thanks! Were the image alignment icons added, or updated? They should be replacing the existing icons, align left, align right, align center, align none.

#31 follow-up: @liljimmi
10 years ago

Cool. If you add them to Github I can do the CSS bit.

#32 in reply to: ↑ 30 ; follow-up: @EmpireOfLight
10 years ago

Replying to melchoyce:

New dashicons fonts, uniF515–unif531. Player controls, tickets, phone, money, palm tree, image alignment icons added

Thanks! Were the image alignment icons added, or updated? They should be replacing the existing icons, align left, align right, align center, align none.

The alignment icons were added, but they didn't replace the old ones; they are appended to the end of the font. I can replace the old ones if need be.

#33 in reply to: ↑ 31 ; follow-up: @EmpireOfLight
10 years ago

Replying to liljimmi:

Cool. If you add them to Github I can do the CSS bit.

They're in github now, but the preview page needs to be updated. The css file was updated with the latest base64 embed code from fontsquirrel, so if that's what you're referring to re:the CSS bit, it's done.

#34 in reply to: ↑ 32 @melchoyce
10 years ago

Replying to EmpireOfLight:

Replying to melchoyce:

New dashicons fonts, uniF515–unif531. Player controls, tickets, phone, money, palm tree, image alignment icons added

Thanks! Were the image alignment icons added, or updated? They should be replacing the existing icons, align left, align right, align center, align none.

The alignment icons were added, but they didn't replace the old ones; they are appended to the end of the font. I can replace the old ones if need be.

Yes please. Thanks @empireoflight!

#35 in reply to: ↑ 33 @liljimmi
10 years ago

Replying to EmpireOfLight:

The css file was updated with the latest base64 embed code from fontsquirrel, so if that's what you're referring to re:the CSS bit, it's done.

I mean adding the css for the dashicons like

.dashicons-album:before {
	content: "\f514";
}

I can add them for all the new ones.

#36 @aristath
10 years ago

Hello everyone,

A few years ago I created about 300 icons (SIL licenced - the equivalent of GPL for fonts)
However I no longer maintain them and would be more than happy if they were somehow put to good use.
I don't care about attributions etc, I just want to help any way I can.

You can see the icons if you want here: http://press.codes/downloads/elusive-icons-webfont/
and you can find the SVGs on github: https://github.com/aristath/elusive-iconfont

So if anyone thinks some of these icons are worth it, you can simply copy-paste them and edit them to your liking.
If needed I can submit PRs to the github repo with the icons that we need.

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


10 years ago

#38 @azaozz
10 years ago

  • Milestone changed from Future Release to 4.1
  • Priority changed from normal to high

#39 @ocean90
10 years ago

  • Owner set to ocean90
  • Status changed from new to accepted

@ocean90
10 years ago

dashicons.css

#40 @ocean90
10 years ago

Seems like the grid for the font was broken. All icons are pushed down by 2px now.

#41 @EmpireOfLight
10 years ago

Can you post screenshot(s)? Not sure how to reproduce this issue.

@ocean90
10 years ago

@ocean90
10 years ago

#42 @ocean90
10 years ago

@EmpireOfLight See attached screenshots. To reproduce just copy the font files to wp-includes/fonts/.

Last edited 10 years ago by ocean90 (previous) (diff)

This ticket was mentioned in Slack in #design by ocean90. View the logs.


10 years ago

#44 @melchoyce
10 years ago

Ben, maybe there was just an error with the export or fontsquirrel conversion?

#45 @EmpireOfLight
10 years ago

I updated the repo w/new font files. In the last set, "Fix Vertical Metrics" wasn't checked in fontsquirrel. Maybe that will fix it; please test.

#46 @ocean90
10 years ago

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

In 30797:

Dashicons: Update to the latest files.

New icons:

  • .dashicons-controls-play (f522)
  • .dashicons-controls-pause (f523)
  • .dashicons-controls-forward (f519)
  • .dashicons-controls-skipforward (f517)
  • .dashicons-controls-back (f518)
  • .dashicons-controls-skipback (f516)
  • .dashicons-controls-repeat (f515)
  • .dashicons-controls-volumeon (f521)
  • .dashicons-controls-volumeoff (f520)
  • .dashicons-phone (f525)
  • .dashicons-building (f512)
  • .dashicons-store (f513)
  • .dashicons-album (f514)
  • .dashicons-palmtree (f527)
  • .dashicons-tickets-alt (f524)
  • .dashicons-money (f526)

Updated icons:

  • .dashicons-align-left (f135)
  • .dashicons-align-right (f136)
  • .dashicons-align-center (f134)
  • .dashicons-align-none (f138)

props liljimmi, melchoyce, empireoflight.
fixes #29444.

#47 @liljimmi
10 years ago

Here is an inventory of old and new unfulfilled requests for the next ticket:

  • "Sticky" icon for posts
  • "Move" icon
  • Email (using the @ sign)
  • 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.
  • A filter icon
  • An animal icon (for zoo websites, pet shops, etc.)
  • Icon for WordPress MultiSite
  • Icons to represent CSS ( e.g. {} ) and shortcodes e.g. [] )
  • PDF icon
  • A page icon that wasn't filled/solid like the Dashicons '\f498' is (something like Noticons '\f443').
  • A paperclip
  • A light bulb with rays to indicate it's on (this would complement Dashicons '\f339')

#48 follow-up: @melchoyce
10 years ago

Thanks for compiling that, @liljimmi. We might want to hold off on making a new request ticket, pending upcoming changes to how we make Dashicons in 4.2.

#49 in reply to: ↑ 48 @liljimmi
10 years ago

Replying to melchoyce:

We might want to hold off on making a new request ticket, pending upcoming changes to how we make Dashicons in 4.2.

Sounds like a good plan :-)

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


10 years ago

#51 @wordpresssites
9 years ago

PDF icon would be useful.

Note: See TracTickets for help on using tickets.