Dashicons in WordPress 5.5 (the final update)

Edit 8/12/2020: When initially published, 5 editor icons were missing. These have been added and all counts have been updated to be accurate. Props @coffee2code.

Earlier this year, a post was published on the Make WordPress Design blogblog (versus network, site) detailing the short road ahead for Dashicons.

We’ve recently discussed how to best move forward with icons in WordPress. The blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor uses SVG icons directly, and the rest of WordPress uses the Dahsicons icon font. One of the challenges with an icon font is that it’s one big compiled “sprite”, and so even though it gets cached well, for every icon you add the sprite grows bigger. With SVG you include just the icons you need.

@joen – Next steps for Dashicons

Dashicons were originally brought into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. as part of the MP6 project that redesigned the entire WordPress adminadmin (and super admin) (see #25858). A lot has changed over the last 7+ years and it’s time to explore better, more efficient ways to manage icons in WordPress Core.

This update will be the final update to the Dashicons icon font in WordPress Core.

Don’t worry, the Dashicons font is not going anywhere. It will continue to be bundled with WordPress in future releases. However, requests to add new icons to the font will no longer be accepted.

New icons

In the final Dashicons update being included in the 5.5 release, 71 new icons have been added. This includes 32 icons that were merged into the icon font that already existed in the block editor.

Reminder: The WOFF 1.0 format (while still included for backwards compatibility) will not include these new icons. The reasons for this were detailed in the Dashicons developer note accompanying WordPress 5.2.

Block editor

IconCSSCSS Cascading Style Sheets. ClassCode
dashicons-align-full-width f114
dashicons-align-pull-left f10a
dashicons-align-pull-right f10b
dashicons-align-wide f11b
dashicons-block-default f12b
dashicons-button f11a
dashicons-cloud-saved f137
dashicons-cloud-upload f13b
dashicons-columns f13c
dashicons-cover-image f13d
dashicons-ellipsis f11c
dashicons-embed-audio f13e
dashicons-embed-generic f13f
dashicons-embed-photo f144
dashicons-embed-post f146
dashicons-embed-video f149
dashicons-exit f14a
dashicons-heading f10e
dashicons-html f14b
dashicons-info-outline f14c
dashicons-insert-after f14d
dashicons-insert-before f14e
dashicons-insert f10f
dashicons-remove f14f
dashicons-shortcode f150
dashicons-table-col-after f151
dashicons-table-col-before f152
dashicons-table-col-delete f15a
dashicons-table-row-after f15b
dashicons-table-row-before f15c
dashicons-table-row-delete f15d
dashicons-saved f15e

Social

IconCSS ClassCode
dashicons-amazon f162
dashicons-google f18b
dashicons-linkedin f18d
dashicons-pinterest f192
dashicons-podio f19c
dashicons-reddit f195
dashicons-spotify f196
dashicons-twitch f199
dashicons-whatsapp f19a
dashicons-xing f19d
dashicons-youtube f19b

Databases

IconCSS ClassCode
dashicons-database-add f170
dashicons-database-export f17a
dashicons-database-import f17b
dashicons-database-remove f17c
dashicons-database-view f17d
dashicons-database f17e

Notifications

IconCSS ClassCode
dashicons-bell f16d

Transportation

IconCSS ClassCode
dashicons-airplane f15f
dashicons-car f16b

Devices

IconCSS ClassCode
dashicons-calculator f16e
dasicons-games f18a
dashicons-printer f193

Food & beverage

IconCSS ClassCode
dashicons-beer f16c
dashicons-coffee f16f
dashicons-drumstick f17f
dashicons-food f187

Miscellaneous

IconCSS ClassCode
dashicons-bank f16a
dashicons-hourglass f18c
dashicons-money-alt f18e
dashicons-open-folder f18f
dashicons-pdf f190
dashicons-pets f191
dashicons-privacy f194
dashicons-superhero f198
dashicons-superhero-alt f197
dashicons-edit-page f186
dashicons-fullscreen-alt f188
dashicons-fullscreen-exit-alt f189

Thank you to anyone and everyone that has contributed to Dashicons over the last 7+ years.


To see all of the changes to Dashicons since the last update included in WordPress 5.2, check out the repository on GitHub or the ticketticket Created for both bug reports and feature development on the bug tracker. on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. (#49913). To get a complete overview of all icons please visit developer.wordpress.org/resource/dashicons/.

Props @empireoflight, @joen, and @casiepa for proofreading.

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

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

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 UIUI User interface/UXUX User experience 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 UIUI User interface 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 UXUX User experience, 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 / CSSCSS Cascading Style Sheets. roadmap
  • Screen-by-screen sweep: https://docs.google.com/spreadsheets/d/1evtUATA7EC834fB-Vo72kPpV05Lfqk_xzkAD7epQva8/edit#gid=0
  • Open floor / ticketticket Created for both bug reports and feature development on the bug tracker. scrub and commit what we can.

#agenda, #ui

UI Chat Agenda, May 21

Quick check ins on:

Specific assignments for:

  • Screen-by-screen sweep
  • TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. 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 UIUI User interface 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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. Updates will be posted here on Make/CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

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, networknetwork (versus site, blog) adminadmin (and super admin), editor, customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., 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 CSSCSS Cascading Style Sheets. 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. roadmap, initially a discussion about preprocessors in regard to their role in WordPress, both in the adminadmin (and super 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