Create new dashicons (4.1)

[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.

[liljimmi]

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.

[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?

[liljimmi]

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!

[EmpireOfLight]

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.

[benoitchantre]

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

[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.

[benoitchantre]

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.

[Offereins]

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.

[geminorum]

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

[bobbingwide]

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?

[miss_jwo]

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

[melchoyce]

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

[melchoyce]

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

[melchoyce]

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

[melchoyce]

One more update to alignment.

[melchoyce]

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

[melchoyce]

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

[melchoyce]

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.

[tberneman]

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]

Tickets without the WordPress logo

[liljimmi]

Tickets without the WordPress logo - PNG

[liljimmi]

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

[liljimmi]

Phone

[liljimmi]

Phone - PNG

[liljimmi]

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]

Generic money Dashicon

[liljimmi]

Generic money Dashicon - PNG

[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?

[liljimmi]

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 :-)

[liljimmi]

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.

[EmpireOfLight]

Working on this now...

[EmpireOfLight]

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

[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.

[liljimmi]

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

[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.

[EmpireOfLight]

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.

[melchoyce]

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!

[liljimmi]

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.

[aristath]

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.

[ocean90]

dashicons.css

[ocean90]

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

[EmpireOfLight]

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

[ocean90]

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

[melchoyce]

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

[EmpireOfLight]

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.

[ocean90]

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.

[liljimmi]

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')

[melchoyce]

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.

[liljimmi]

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 :-)

[wordpresssites]

PDF icon would be useful.