WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 4 years ago

#29444 closed enhancement (fixed)

Create new dashicons (4.1)

Reported by: melchoyce Owned by: ocean90
Milestone: 4.1 Priority: high
Severity: normal Version:
Component: Administration Keywords:
Focuses: ui Cc:
PR Number:

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 5 years ago.
dashicons-image-alignment.jpg (11.1 KB) - added by melchoyce 5 years ago.
dashicons-image-alignment.2.ai (624.3 KB) - added by melchoyce 5 years ago.
dashicons-media-player.ai (391.9 KB) - added by melchoyce 5 years ago.
dashicons-media-player.png (959 bytes) - added by melchoyce 5 years ago.
dashicons-image-alignment.3.ai (626.3 KB) - added by melchoyce 5 years ago.
Screen Shot 2014-11-10 at 12.56.02 PM.png (5.5 KB) - added by melchoyce 5 years ago.
dashicons-new_11-10-14.ai (361.5 KB) - added by melchoyce 5 years ago.
dashicons-new_11-10-14.png (1.6 KB) - added by melchoyce 5 years ago.
dashicons-media-player.2.ai (397.4 KB) - added by melchoyce 5 years ago.
dashicons-tickets-alt.ai (61.6 KB) - added by liljimmi 5 years ago.
Tickets without the WordPress logo
tickets-alt.png (1.0 KB) - added by liljimmi 5 years ago.
Tickets without the WordPress logo - PNG
dashicons-phone.ai (57.1 KB) - added by liljimmi 5 years ago.
Phone
phone.png (721 bytes) - added by liljimmi 5 years ago.
Phone - PNG
dashicons-money.ai (51.7 KB) - added by liljimmi 5 years ago.
Generic money Dashicon
money.png (660 bytes) - added by liljimmi 5 years ago.
Generic money Dashicon - PNG
dashicons.zip (2.3 MB) - added by EmpireOfLight 5 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 5 years ago.
dashicons.css
before.png (59.5 KB) - added by ocean90 5 years ago.
after.png (58.8 KB) - added by ocean90 5 years ago.

Change History (71)

#1 @melchoyce
5 years ago

  • Description modified (diff)

#2 @liljimmi
5 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 5 years ago by liljimmi (previous) (diff)

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

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

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

#7 in reply to: ↑ 6 ; follow-up: @EmpireOfLight
5 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 5 years ago by EmpireOfLight (previous) (diff)

#8 in reply to: ↑ 7 @benoitchantre
5 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
5 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
5 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
5 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
5 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
5 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.


5 years ago

#15 @melchoyce
5 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
5 years ago

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

#17 @melchoyce
5 years ago

One more update to alignment.

#18 @melchoyce
5 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.


5 years ago

#20 @melchoyce
5 years ago

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

#21 @melchoyce
5 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.


5 years ago

#23 @tberneman
5 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
5 years ago

Tickets without the WordPress logo

@liljimmi
5 years ago

Tickets without the WordPress logo - PNG

#24 @liljimmi
5 years ago

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

@liljimmi
5 years ago

Phone

@liljimmi
5 years ago

Phone - PNG

#25 @liljimmi
5 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
5 years ago

Generic money Dashicon

@liljimmi
5 years ago

Generic money Dashicon - PNG

#26 follow-up: @ocean90
5 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
5 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
5 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
5 years ago

Working on this now...

@EmpireOfLight
5 years ago

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

#30 follow-up: @melchoyce
5 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
5 years ago

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

#32 in reply to: ↑ 30 ; follow-up: @EmpireOfLight
5 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
5 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
5 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
5 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
5 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.


5 years ago

#38 @azaozz
5 years ago

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

#39 @ocean90
5 years ago

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

@ocean90
5 years ago

dashicons.css

#40 @ocean90
5 years ago

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

#41 @EmpireOfLight
5 years ago

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

@ocean90
5 years ago

@ocean90
5 years ago

#42 @ocean90
5 years ago

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

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

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


5 years ago

#44 @melchoyce
5 years ago

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

#45 @EmpireOfLight
5 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
5 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
5 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
5 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
5 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.


5 years ago

#51 @wordpresssites
4 years ago

PDF icon would be useful.

Note: See TracTickets for help on using tickets.