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

Converting Dashicons to SVG

Currently, WordPress uses a font to render all the icons. The goal is to convert to SVG. We’ve started the process, but there’s a lot more work to be done to make sure the SVGs are rendered properly.

Read more about the project’s purpose in a previous post by @melchoyce:

https://make.wordpress.org/core/2015/06/11/moving-dashicons-from-an-icon-font-to-svg/

Since that post, progress has been made on a new GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ repo at github.com/ryelle/WordPress/ (the ones listed in the previous post are no longer being used). Issues and instructions on how to get started can be found there.

So far, the font code has been replaced with SVG code wherever possible. For the most part, the SVGs are displaying properly. Issues are being posted on the GitHub repo.

To summarize:

  • There are several places where the SVG is still not showing up. The code used to display the font is inconsistent, e.g. in the TinyMCE bar above the visual content editor.
  • There are likely many places that haven’t been discovered that need icons. For the most part, if you see a square, it’s a missing icon. I’ve gone through and noted everywhere that I’ve seen this, but that’s just one person.
  • The CSSCSS Cascading Style Sheets. styling of the SVGs is fundamentally different that what’s being used to style the font. We need people to style the SVGs so they look and behave the way the font currently does.
  • We need to clean out the old CSS (and HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.) code being used to display and style the font.
  • We need to QA test on a variety of devices and browsers.

Get started by joining the #design-dashicons channel on 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/.. Meetings are held there every Friday at 7pm UTC. The next one is on Friday at 19:00 UTC.

#dashicons

Today in the Nightly: Customize in the Toolbar, Passwords UI, List Tables on Phones, Dashicons

Development leading up to the first betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. brought several visual changes. These are available right now in the nightly build. Switch a site to nightly builds and try them out.

Customize in the toolbar

To disambiguate between links to the 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. and links to the Appearance screens from the front-end, Customize now has a top-level toolbar button rather than having links to it mixed with dashboard links in the site menu. This context mixing leads to disrupted user expectations as they navigate, as well as experiences that feel slower or actually are slower in some cases. See #32924.

This means an additional top-level menu item, but the existing links to Widgets and Themes in the dropdown will now point to the adminadmin (and super admin), as the Dashboard and Menus links do. The advantage and goal for this change is to make it clear that you are about to enter the customizer. Deep links have not been added back in this go-round; this means that direct links to HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and Background are currently absent (with a very narrow exception related to old browsers). Those two deep links are still available in the admin menu under Appearance, which similarly mixes context but has not yet been addressed.

More changes are coming to the toolbar. Peek at a possibility for more general improvements to the toolbar, being discussed in #32678.

Phone friendly list tables

List tables now scale down to phones. The column truncation strategy they used before didn’t scale down to small screens. A single column layout with disclosures is the new strategy. Some of our most important screens use list tables, notably Media and Posts. Truncated columns was number 5 on our top  5 impediments to flow on touch devices list.

After:

Before:

See #32395.

For more screenshots, see these visual surveys of the list table screens.

Toolbar interaction fixes for touch devices

I’ve been wanting this one for a long time.  Toolbar interaction was number 3 on the top  5 impediments to flow on touch devices.

 

Fixed!

Fixed!

See #29906. That ticketticket Created for both bug reports and feature development on the bug tracker. is a good read.  It has: Visual feedback and visual surveys. Punting a working fix to the next release so that a new, more future proof approach could be tried. Development of touch capability detection. Working around iOSiOS The operating system used on iPhones and iPads.. Development of testing checklists. Lots of iteration.

Passwords UIUI User interface

The password set/change UI was updated with these improvements.

  • Generate the password for the user
  • More tightly integrate password strength meter
  • Warn on weak passwords

See #32589 for more screenshots.

Dashicons update

Dashicons received a big update.

New icons:

  • .dashicons-admin-customizer (f540)
  • .dashicons-admin-multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site (f541)
  • .dashicons-editor-table (f535)
  • .dashicons-filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. (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)

dashicons-preview

See #30902.

Better styling for .form-invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. inputs

See #32490.

Responsive styling for my-sites.php

My Sites now moves to a single column layout on narrow viewports. Here it is on an iPhone 6, an iPad, and a Macbook, as well as at full-width.

Here’s what it looked liked before.

my-sites-before

See #31685 – Better responsive styling for my-sites.php

Crosslinking Customizer Panels

The graf in the Menus panel details about using the Customize Menu widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. now links directly to the widgets panel.

customize menus details

See #32742.

You might notice the misaligned question mark icon on that screenshot. #32733 is tracking that.

 Easy switching between production and nightly builds

The beta tester pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party makes it easy to switch a site to nightly builds. Now switching back to the latest stable build is just as easy. It’s not the prettiest, but it is shown only to beta testers and will suffice until we finally refresh the Grand Unified Updater screen. For info on using the beta tester plugin to test with nightly builds, see the Beta Testing page of the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. handbook.

See #32613.

 

Previously: Today in the Nightly: Site Icons, Text Editor in Press This

#beta-testing-flow, #customize, #dashicons, #list-tables, #multisite, #passwords, #today-in-the-nightly, #toolbar

Moving Dashicons from an Icon Font to SVG

In the next couple months, we’re going to focus on converting the Dashicons icon font in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to SVG. The process of adding and updating the Dashicons font is an incredibly labor intensive, tedious process that is currently limited to a small number of people who have the ability to add new characters to the .glyphs source file. By moving to SVG, we’re not only making the process easier for Dashicons maintainers, but also making the process of adding and updating icons easier and more open to the entire design community.

Why SVG?

When we initially built Dashicons, we tried out a couple different methods for including them in the adminadmin (and super admin). SVG was our preferred method, but due to lack of support and fallbacks for SVG at the time, we opted to go for the more widely support icon font method.

However, there have tremendous strides to improve support and understanding around SVG in the past year and a half, and we think now is a good time to start the transition process in core.

Here are some of the benefits SVG icons provide:

  • The icons are straight up vector — that means no font antialiasing issues when you use the icons outside of their 20×20 pixel grid, making the icons much more versatile
  • Better CSSCSS Cascading Style Sheets. control — switching to SVG introduces the possibility of multi-color icons
  • Better positioning control than icon fonts
  • SVG won’t fail to load like a font might, because inline SVGs are included right there in the document
  • Potentially better for accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) [source]
  • Much easier to maintain than the current icon font
  • Easier for pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and theme authors to add custom SVGs

The cons:

  • Less native browser support (but fallback options exist)
  • Figuring out backwards compatibility in core will be challenging (but not insurmountable)

Chris Coyier has a pretty fantastic rundown on SVG vs. icon fonts.

Just to note: we’re not talking about supporting uploading SVGs in the media library. These would be SVGs built by us, included inline in the WordPress dashboard.

The Roadmap

Here’s the plan:

  • As much as possible, we’re going to attempt to build this as a feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. — but we’ve already started running into some issues with what we can and can’t do in a plugin.
  • The MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia will be svg icons being generated into a sprite through a Grunt build process. For the MVP, we’re not going to focus on browser support.
  • Once we have an MVP up, we’re going to explore the best way to provide browser support using techniques outlined by Chris Coyier in Github, as well as figure our backwards compatibility with the icon font.
  • Finally, we’re going to explore breaking up SVGs into different icon “packs” (TinyMCE, admin bar, CPT, etc.) and figure out if we can enqueue them on the fly.

Ideally, we’d like to do as much of this during the 4.3 cycle as possible, with the idea of merging in 4.4. This means we’ll need to have a solid MVP by August, which is feasible if we can get more help. That’s why we’d like you to…

Join us

We would love to get more people involved in this project. Specifically, we’re looking for people to help build out the MVP, and people to work on compatibility issues.

We’re going to be building out the plugin on githubGitHub GitHub is a website that offers online implementation of git repositories that can 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/:  https://github.com/ryelle/svg-dashicons-plugin. There’s nothing there yet, but we hope to get some early work up soon. (We also did some very early explorations in another repo, if you want to see some of the past conversations and issues.)

Our meetings take place in #design-dashicons every Thursday at 18:30 UTC. Please join in and help us make Dashicons even better.

If you have questions, feel free to leave a comment here or ask 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/..

#dashicons, #roadmaps

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

Dashicons in WordPress 3.9

WordPress 3.8 has introduced an icon font for the WordPress adminadmin (and super admin), named Dashicons. Dashicons includes 167 icons until now.
WordPress 3.9 includes 30 new fresh and clean icons. Thanks to all contributors to ticketticket Created for both bug reports and feature development on the bug tracker. #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 CSSCSS Cascading Style Sheets. 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 UIUI User interface.

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 widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. 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