Create new dashicons (4.3)

[EmpireOfLight]

This is a follow-up to #29444, which ended with @liljimmi listing 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')

Can we divvy these up? I've already made sticky posts. Anyone care to jump in on the others?

Also, what's the flow going to be for submitting new dashicons? We've discussed moving toward SVG sprite, for 4.2. This will hopefully make it easier to submit and discuss new icons.

Design for sticky post icon

I had a couple other icons in the last thread which didn't make it into 4.1 (image filter, warning, table, filter, and sticky post). They could use another set of eyes for consistency and style. I'll reattach them here.

For now, let's hold off on making more new icons until we've had a chance to meet and discuss the plans outlined here: ​https://make.wordpress.org/design/2015/01/04/the-future-of-dashicons/

#31059 was marked as a duplicate.

#31079 was marked as a duplicate.

There's a dashicon named "visibility", that is an eye. It would be great if there was a dashicon that was something like an eye with a line through it, or a closed eye, or something to imply "hidden" or "not visible".

#31125 was marked as a duplicate.

I would like to see a thumbs up and thumbs down icon added to the list

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

#31207 was marked as a duplicate.

Please add the social network icon vk.com.
​http://iconbird.com/view/30005_iconki_vkontakte_vkontakte

Rotate Dashicon for Image Flow

Rotate Dashicon for Image Flow - AI

Rotate Dashicon for Image Flow - PNG

Please could you add the aircraft icon as it would work perfectly for the aircraft for sale custom post type I am working on.

Any chance of creating a little Milling tool icon? Something like this would be perfect:

<< I don't have permission to use this particular one though.

Hi.

I hope you can help.
I would love you to create a spray can icon for me.
Something like this would be perfect.

Thank you very much.
Regards,
Paul

Suggestion from #32200: TripAdvisor icon

Suggestion from #32169: A travel or aviation-related icon, like an airplane

Suggestion from #31079: Crossed out eye, opposite of visible

Suggestion from #31059:

• A lock that is open
• A crossed out eye (​http://goo.gl/vXdoXO)
• Youtube icon
• Database icon
• pdf media icon
• "random" play button (​https://developer.wordpress.org/resource/dashicons/#randomize)
• Loading icon (https://core.trac.wordpress.org/browser/trunk/src/wp-admin/images/spinner.gif)

Suggestion from #31125: Thumbs up, thumbs down

Suggestion from ​https://wordpress.slack.com/archives/design/p1431196199000010: Warning

Once we restart Dashicons meetings next week, we can make a better plan for tackling new icons this cycle. In the meantime, I'm switching this ticket to be for 4.3, since we never got around to it for 4.2.

#32200 was marked as a duplicate.

#32169 was marked as a duplicate.

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

Added "Hidden" icon: dashicons-hidden.ai​.

Preview added in dashicons-hidden-preview.png​.

dashicons-thumbs.ai​ contains thumbs up and thumbs down. The icons are adapted from Open Iconic (​https://useiconic.com/open/), licensed under the MIT License. I've tweaked the icon sizing and adjusted the points to adapt to Dashicon's 20px grid. Preview in dashicons-thumbs-preview.jpg​

This ticket was mentioned in ​Slack in #core-passwords by binarykitten. ​View the logs.

I like the cute carrot icon to represent food, it's context-focused, maybe too much. I think a plate, knife and "spork" could help define things like restaurants and eating.

Something in the fashion of the following might be nice:

#32614 was marked as a duplicate.

• Printer - #32614
• Instagram - #32568
• Pinterest - #32568

#32568 was marked as a duplicate.

@melchoyce, is there anything you anticipate would be ready for 4.3?

There's a couple in here that could likely make it in for this cycle. I'll check in with @empireoflight.

Are there any that need making?

Last night we started working on a Customizer icon for #32678 (​https://wordpress.slack.com/archives/design/p1434596260000082). That could use some more eyes, and ideas.

An open lock based on the lock Dashicon could also be good to get in this cycle, since we have the base to work from.

At the end of the cycle, let's audit the list of icons and prune out the ones we don't think are appropriate.

Sounds good, we can figure which ones to prune at one of our Slack meetings.

I can work on the lock :-)

Sorry I haven't been much help on these; let me know what the final vector files are ready and I'll update the font.

See #32733 and #32734.

I think a dashicons-plus-alt needs to exist which has the same thickness as dashicons-no-alt.

#32748 was marked as a duplicate.

@melchoyce, any news? If there is no need for new icons in 4.3, we can just reassign to 4.4.

Sorry, I've been sick the past couple days. We can discuss this in Dashicons chat later today.

I'll make the lock one now.

Unlocked version of dashicons-lock

Unlocked version of dashicons-lock SVG

Unlocked version of dashicons-lock Preview

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

Based on our chat today (​https://wordpress.slack.com/archives/design-dashicons/p1435257113000004), we've decided to add these icons for 4.3:

• https://core.trac.wordpress.org/attachment/ticket/30902/dashicons-new_11-10-14.ai
• https://core.trac.wordpress.org/attachment/ticket/30902/dashicons-rotate.ai
• https://core.trac.wordpress.org/attachment/ticket/30902/dashicons-hidden.ai
• https://core.trac.wordpress.org/attachment/ticket/30902/dashicons-thumbs.ai
• https://core.trac.wordpress.org/attachment/ticket/30902/dashicons-unlocked.ai
• The icon from #32678
• The updated + icon @empireoflight mentioned previously, can't remember which ticket

@empireoflight, could you add these icons to the font before 4.3 beta 1, and maybe take a look at smoothing a couple of them out before they go in? In particular, I'm unsure about the ones I made in dashicons-new_11-10-14.ai​ and dashicons-thumbs.ai​

​https://github.com/melchoyce/dashicons is updated. There are 2 image filter icons. @melchoyce design was losing clarity at actual size, so I did one with three separate circles. I only previewed them in photoshop so the best way to compare them would be actually loading them into the admin. Where will this appear so we can see it in context?

2 options for image filter, shown in admin sidebar

The bottom one feels more clear in this context to me. Let's nix the top.

What are the Unicodes for all the new icons?

Latest version of Dashicons. Please review and make sure we don't need to add/delete any.

Replying to liljimmi:

What are the Unicodes for all the new icons?

See my screenshot.

Thank you :-)

Also, can the thumbs-up be flipped w/CSS for thumbs-down, or do we also need a thumbs-down icon?

CSS transform wont work in IE < 9. Is that a concern?

Replying to liljimmi:

CSS transform wont work in IE < 9. Is that a concern?

It feels like enough of a concern, IMO.

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

This needs to be in before the weekend, preferably before beta1.

CSS for new Dashicons

Font files with new Dashicons

CSS for new Dashicons - includes .dashicons-layout missing from last patch

Seeing a typo in the patch:

.dashicons-layout:before { 
content: "\ff538"; 
}

The second "f" should be removed.

Do you know if .dashicons-exerpt-view:before, /* Misspelled. Use .dashicons-excerpt-view instead. */ was intentionally removed? We should ideally deprecate that eventually, but I figured we'd do that kind of cleanup when we move over to SVG.

.dashicons-admin-filter should probably just be .dashicons-filter since it's not specifically going into the admin menu.

Likewise, .dashicons-lock-unlock should probably just be .dashicons-unlock.

Sorry, should have caught these earlier. Do you want me to edit your patch, or do you have time to revisit it today? I don't want to take up too much of your time.

Anyone other than @liljimmi who should get props on the commit?

Replying to obenland:

Anyone other than @liljimmi who should get props on the commit?

Should be @liljimmi, @empireoflight, and I for this release.

I'll make a new patch now.

Do you know if .dashicons-exerpt-view:before, /* Misspelled. Use .dashicons-excerpt-view instead. */ was intentionally removed?

I think that may have been in trunk, but not in Git?
I'll add that back.

Replying to liljimmi:

I'll make a new patch now.

Thanks!

Do you know if .dashicons-exerpt-view:before, /* Misspelled. Use .dashicons-excerpt-view instead. */ was intentionally removed?

I think that may have been in trunk, but not in Git?
I'll add that back.

Yeah, nothing really ever moves back to the Github repo from trunk. We should probably just shut it down now that we're using ​https://developer.wordpress.org/resource/dashicons/ for the demo.

Removed typo from .dashicons-layout. Changed .dashicons-admin-filter to .dashicons-filter and .dashicons-lock-unlock to .dashicons-unlock

30902-3.patch​ looks good to go! Thanks for pushing that through today, @liljimmi. :)

#32874 was marked as a duplicate.

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

Added thumbs down icons

New font files including thumbs down

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

Fixed thumbs-down class and added hypnens to hyphens to thumbs-up/down icon classes

Changed thumbs down unicode to remove decimals, which breaks the css that displays the icon

In 33108:

Dashicons: Update to the latest files.

New icons:

• .dashicons-admin-customizer (f540)
• .dashicons-admin-multisite (f541)
• .dashicons-editor-table (f535)
• .dashicons-filter (f536)
• .dashicons-hidden (f530)
• .dashicons-image-filter (f533)
• .dashicons-image-rotate (f531)
• .dashicons-layout (f538)
• .dashicons-sticky (f537)
• .dashicons-thumbs-down (f542)
• .dashicons-thumbs-up (f529)
• .dashicons-unlock (f528)
• .dashicons-warning (f534)

Updated icons:

• .dashicons-plus (f132)
• .dashicons-yes (f147)

props liljimmi, melchoyce, empireoflight.
fixes #30902.

In 33126:

Dashicons: Update to the latest files.

Revert the updates to .dashicons-plus (f132) in [33108] and instead introduce a new icon, .dashicons-plus-alt2 (f543).

props liljimmi, melchoyce, empireoflight.
see #30902.

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

In 33150:

Customizer: Use the new dashicon for the Preview/Customize toggle in narrow screens.

see #30902, #28784.

#33075 was marked as a duplicate.

Suggestion from #33075: move/drag icon.

love the dashicons, still no 'printer' icon...

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