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 CSSCSS Cascading Style Sheets. files. This change will not be noticeable from the WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 networknetwork (versus site, blog) 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.

IconCSS ClassCode
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

IconCSS ClassCode
dashicons-editor-ol-rtlf12c
dashicons-editor-ltrf10c

Core Teams

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

IconCSS ClassCode
dashicons-tidef10d
dashicons-rest-apif124
dashicons-code-standardsf13a

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)

IconCSS ClassCode
dashicons-admin-site-altf11d
dashicons-admin-site-alt2f11e
dashicons-admin-site-alt3f11f

Menus

IconCSS ClassCode
dashicons-menu-alt *f228
dashicons-menu-alt2 *f329
dashicons-menu-alt3 *f349

Social

IconCSS ClassCode
dashicons-instagramf12d

Miscellaneous

IconCSS ClassCode
dashicons-businesswomanf12f
dashicons-businesspersonf12e
dashicons-email-alt2f467
dashicons-yes-altf12a
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