Dashicons in WordPress 5.2

It’s been over 3 years since Dashicons has been updated (see #34221 from version 4.5). But, they have not been forgotten about! In 5.2, the Dashicons will see several changes, including 13 awesome new icons.

New Build Process

A new build process has been implemented in the Dashicons GitHub repository to make adding new icons easier. Now, when SVG files are added for new icons they are automatically included in the font and CSS files. This change will not be noticeable from the WordPress Core code base, but it’s worth noting.

New Font File Format: WOFF 2.0

This release will see the introduction of a new font file format, WOFF2 (Web Open Font Format 2). WOFF2 is a more modern replacement for the original WOFF 1.0 format that uses an improved compression, which results in lower network consumption.

WOFF2 is supported by all modern browsers, but is not supported in Internet Explorer.

WOFF 1.0 Format

The WOFF 1.0 file will remain in WordPress Core to ensure backwards compatibility for plugins and themes loading the wp-includes/fonts/dashicons.woff file directly. This file has not been updated to include the new icons below. The new build process currently only allows one WOFF format file to be built. Since WOFF2 is more modern, that is the file format being built moving forward.

However, WOFF 1.0 is compiled and included as an embedded font directly in the dashicons.css file. The embedded WOFF format has been updated to include the new icons. If you wish to use the new Dashicons and require the WOFF 1.0 format for IE support, it is recommended that you use the dashicons.css file included in core to define the Dashicons font face.

Alternatively, you can use the Embedded OpenType format file at wp-includes/fonts/dashicons.eot (supported by all versions of IE). This file does include the new icons.

New Icons

In 5.2, 13 completely new icons were added. However, 18 additional icons that were previously included in the font files but did not have a corresponding CSS declaration are now available. These icons are marked with an asterisk (*) below.

Buddicons

The Buddicons were all previously included in the icon font, but each is now accompanied by new a dashicons-buddicons-* class.

Icon CSS Class Code
dashicons-buddicons-activity * f452
dashicons-buddicons-bbpress-logo * f477
dashicons-buddicons-buddypress-logo * f448
dashicons-buddicons-community * f453
dashicons-buddicons-forums * f449
dashicons-buddicons-friends * f454
dashicons-buddicons-groups * f456
dashicons-buddicons-pm * f457
dashicons-buddicons-replies * f451
dashicons-buddicons-topics * f450
dashicons-buddicons-tracking * f455

Editor

Icon CSS Class Code
dashicons-editor-ol-rtl f12c
dashicons-editor-ltr f10c

Core Teams

Three new icons have been introduced for some newer teams: Tide, REST API, and Coding Standards.

Icon CSS Class Code
dashicons-tide f10d
dashicons-rest-api f124
dashicons-code-standards f13a

Sites

With the introduction of 3 new icons in 5.2, there are now 4 total site icons. No matter where you are located in the world, there is now an icon for you! (GH-95)

Icon CSS Class Code
dashicons-admin-site-alt f11d
dashicons-admin-site-alt2 f11e
dashicons-admin-site-alt3 f11f

Menus

Icon CSS Class Code
dashicons-menu-alt * f228
dashicons-menu-alt2 * f329
dashicons-menu-alt3 * f349

Social

Icon CSS Class Code
dashicons-instagram f12d

Miscellaneous

Icon CSS Class Code
dashicons-businesswoman f12f
dashicons-businessperson f12e
dashicons-email-alt2 f467
dashicons-yes-alt f12a
dashicons-camera-alt * f129
dashicons-plugins-checked * f485
dashicons-update-alt * f113
dashicons-text-page * f121

A very special thanks goes out to @joen, @empireoflight, @folletto, @netweb, @aduth, @dsifford, @SergioEstevao, @cathibosco1, @jaymanpandya, @oztaser, @ryelle, @joshuawold, @nateallen, @desrosj, @bahia0019, and @liljimmi for their contributions to Dashicons since the last update!

To get a complete overview of all icons please visit developer.wordpress.org/resource/dashicons/.

#5-2, #dashicons, #dev-notes, #ui

For those who don’t follow along with Make…

For those who don’t follow along with Make/Design and are interested in exploring some UI/UX ideas and projects, I just posted a few possibilities as a prompt of sorts. There are a number of needs, from strategy to interface design to front-end build to whatever back-end changes need to happen to support. None of those projects currently have active owners, so if you’re interested or if you have any ideas of your own, shout in the comments.

#ui

8/20 UI Chat Agenda: 4.4

After a few weeks off from regular meetings while the final touches were put on 4.3, let’s have our weekly UI chat, today at 17:00 UTC. Inspired by @wonderboymusic‘s call for 4.4 wishlist items, let’s talk today about what our bigger projects are in the world of UI and UX, what our wishlist items are, and what we can reasonably target for 4.4.

#agenda, #ui

UI Chat Agenda, 6/4

Quick check ins on:

#agenda, #ui

UI Chat Agenda, 5/28

Quick check ins on:

  • List tables (@stephdau): #25408
  • Media list table (@ericnkatz): #32398
  • Select2 testing (@afercia): #31696
  • Pattern library / CSS roadmap
  • Screen-by-screen sweep: https://docs.google.com/spreadsheets/d/1evtUATA7EC834fB-Vo72kPpV05Lfqk_xzkAD7epQva8/edit#gid=0
  • Open floor / ticket scrub and commit what we can.

#agenda, #ui

UI Chat Agenda, May 21

Quick check ins on:

Specific assignments for:

  • Screen-by-screen sweep
  • Trac gardening

We’ll finish off with open floor / impromptu Trac scrub and see what, if anything, can get committed now.

#agenda, #meeting, #ui

Weekly core UI meetings for 4.3

Remember weekly UI chats? It’s been a couple years since they wound down, but I’d like to get them started again for at least the 4.3 cycle, as we have some efforts that are not specific to a given feature or component team. UI chats are also a great way for newer contributors to get involved, as there are often a number of smaller patches that can be made and committed quickly. We’ll hold meetings each Thursday, starting this Thursday, May 14, 2015 13:00 UTC-4 in the #design channel in Slack. Updates will be posted here on Make/Core.

For this week, let’s touch on these points:

  • Better responsive list tables.
  • Getting rid of media-new.php.
  • Screen-by-screen sweep for low-hanging fruit on small screens and touch devices (e.g. inconsistent spacing or font sizes at a given media query point).
  • The state of the CSS roadmap.
  • Coverage for other working groups (passwords, network admin, editor, customizer, anything else?).
  • Bug gardening team (see the UI focus on Trac).
  • Open floor (sound off below ahead of time if you wish – remember that this is about admin UI).

#4-3, #agenda, #meeting, #ui

Dashicons in WordPress 4.1

WordPress 4.1 includes 20 new fresh and clean icons. Thanks to @liljimmi, @melchoyce and @empireoflight.

Media Icons

Icon CSS Class Code
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

Posts Screen (updated)

Icon CSS Class Code
dashicons-align-left f135
dashicons-align-right f136
dashicons-align-center f134
dashicons-align-none f138

Misc

Icon CSS Class Code
dashicons-phone f525
dashicons-building f512
dashicons-store f513
dashicons-album f514
dashicons-palmtree f527
dashicons-tickets-alt f524
dashicons-money f526

To get a complete overview of all icons please visit developer.wordpress.org/resource/dashicons/.

#4-1, #dashicons, #dev-notes, #ui

Core CSS: A potential roadmap to sanity

At the community summit, we discussed a core CSS roadmap, initially a discussion about preprocessors in regard to their role in WordPress, both in the admin and in bundled themes. Recently, there has been significant discussion about the initial use of a preprocessor in the development of Twenty Fifteen that was not included when it landed in core. We discussed what role preprocessors may play with our default theme development and core WordPress for the long term.

In this post, you will find some history, some observations, and an outline of where we can go next to bring some sanity to our admin CSS as well as move into the future.

Continue reading

#community-summit, #css, #roadmaps, #ui

Dashicons in WordPress 3.9

WordPress 3.8 has introduced an icon font for the WordPress admin, named Dashicons. Dashicons includes 167 icons until now.
WordPress 3.9 includes 30 new fresh and clean icons. Thanks to all contributors to ticket #26936, especially @melchoyce and @empireoflight.

Media Icons

All media file type icons got a huge facelift, see #26936. There are also two new icons for the playlists feature.

Icon CSS Class Code
dashicons-media-archive f501
dashicons-media-audio f500
dashicons-media-code f499
dashicons-media-default f498
dashicons-media-document f497
dashicons-media-interactive f496
dashicons-media-spreadsheet f495
dashicons-media-text f491
dashicons-media-video f490
dashicons-playlist-audio f492
dashicons-playlist-video f493

TinyMCE/Editor

With the update to TinyMCE 4.0 you can now use four new icons for editor related UI.

Icon CSS Class Code
dashicons-editor-contract f506
dashicons-editor-break f464
dashicons-editor-code f475
dashicons-editor-paragraph f476

Sorting

Use dashicons-external for external uses or randomize a list with dashicons-randomize.

Icon CSS Class Code
dashicons-external f504
dashicons-randomize f503

WPorg specific: Jobs, Profiles, WordCamps

We all WordCamps.

Icon CSS Class Code
dashicons-universal-access f483
dashicons-universal-access-alt f507
dashicons-tickets f486
dashicons-nametag f484
dashicons-clipboard f481
dashicons-heart f487
dashicons-megaphone f488
dashicons-schedule f489

Widgets

Have you already tried the live widget previews? You should. The following icons are created for this feature.

Icon CSS Class Code
dashicons-archive f478
dashicons-tagcloud f479
dashicons-text f480

Alerts/Notifications/Flags

The minus icon has an alternative icon, plus now too. Welcome.

Icon CSS Class Code
dashicons-plus-alt f502

Misc/CPT

End of .

Icon CSS Class Code
dashicons-microphone f482

To get a complete overview of all icons please visit http://melchoyce.github.io/dashicons/.

#3-9, #dashicons, #dev-notes, #ui