Dashicons in WordPress 5.2

Welcome!

The WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:

Found a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.? Create a ticket in the bug tracker.

Want to contribute? Get started quickly with tickets marked as good first bugs for new contributors or join a bug scrub. There’s more on the reports page, like patches needing testing, and on feature projects page.

Other questions? Here is a detailed handbook for contributors, complete with tutorials.

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.

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

b-rad 4:15 pm on April 12, 2019

The dashicons page solicits requests with “For new icon requests, please create a new issue on the Dashicons githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/.” yet most of those were closed or ignored without any action. Why?
- Jonathan Desrosiers 7:41 pm on April 15, 2019
  The Dashicons are maintained by volunteers. This sometimes causes new icon requests to take quite awhile. The main principles there that effect decisions for new Dashicons are:
  - Design for the Majority
  - Clean, Lean, and Mean
  - Striving for Simplicity
  - b-rad 2:33 pm on April 19, 2019
    
    If it’s been three years between updates then it’s really not being maintained at all. That’s called abandoned or forgotten.
    - Code Clinic 11:06 am on April 28, 2019
      
      No. Abandoned means no-one maintains or supports something. This clearly isn’t the case. Dashicons have been supported for the full duration. Likewise 13 new icons have been added along with an additional 18 that were available but couldn’t be used due to lack of css declarations.
      
      Besides, what was your point?
- Ipstenu (Mika Epstein) 5:56 pm on April 28, 2019
  
  A quick check of closed issues shows this isn’t correct.
  
  https://github.com/WordPress/dashicons/issues?q=is%3Aissue+is%3Aclosed
  
  The ones without any comments tend to be ones that either have been resolved (you can see the commits), are actually empty (there’s one for a new icon, but has no information in the ticketticket Created for both bug reports and feature development on the bug tracker.), or are clearly off topic (someone wanted a Halo icon…). That was 2017. After that I stopped looking.
Daniel James 5:21 pm on April 15, 2019

Great to see more new icons added to the Dashicon set. Will the Dashicon resources page be updated with the new icons for reference?
- Jonathan Desrosiers 7:01 pm on April 15, 2019
  
  The Dashicon resources page will be updated once 5.2 is publicly available. It is not being updated prior to prevent a scenario where someone tries to use a new icon that they do not currently have in their version of WordPress. To track this, see the Meta-#4305 ticket.
megamenu 12:17 pm on May 21, 2019

Small correction here – the code for “dashicons-buddicons-bbpressbbPress Free, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org.-logo” is f477, not f12b.

Thanks for the new icons!
- Jonathan Desrosiers 1:01 pm on May 21, 2019
  
  Thank you, @megamenu! I have corrected it.
Webprom Design 7:20 pm on July 10, 2019

Why are they included on front-end? Don’t see any use of them when not logged in… Just doing some optimization work.

Comments are closed.