Tim TrottTim TrottDon't let your dreams just be dreams

WordPress Dashicons Cheat Sheet

By , Friday 30th October 2015 in WordPress

A quick guide showing you how to use the new font icons "Dashicons" which are the official icon font of the WordPress admin as of 3.8.

Here's a quick reference to WordPress Dashicons font icon. This font set was designed for the dashboard UI but can also be used in the front-end. If you're a fan of Glyphicons or Fontawesome, you'll enjoy these as well.

  • dashicons-menu"\f333"
  • dashicons-admin-site"\f319"
  • dashicons-dashboard"\f226"
  • dashicons-admin-post"\f109"
  • dashicons-admin-media"\f104"
  • dashicons-admin-links"\f103"
  • dashicons-admin-page"\f105"
  • dashicons-admin-comments"\f101"
  • dashicons-admin-appearance"\f100"
  • dashicons-admin-plugins"\f106"
  • dashicons-admin-users"\f110"
  • dashicons-admin-tools"\f107"
  • dashicons-admin-settings"\f108"
  • dashicons-admin-network"\f112"
  • dashicons-admin-home"\f102"
  • dashicons-admin-generic"\f111"
  • dashicons-admin-collapse"\f148"
  • dashicons-welcome-write-blog"\f119"
  • dashicons-welcome-add-page"\f133"
  • dashicons-welcome-view-site"\f115"
  • dashicons-welcome-widgets-menus"\f116"
  • dashicons-welcome-comments"\f117"
  • dashicons-welcome-learn-more"\f118"
  • dashicons-format-aside"\f123"
  • dashicons-format-image"\f128"
  • dashicons-format-gallery"\f161"
  • dashicons-format-video"\f126"
  • dashicons-format-status"\f130"
  • dashicons-format-quote"\f122"
  • dashicons-format-chat"\f125"
  • dashicons-format-audio"\f127"
  • dashicons-camera"\f306"
  • dashicons-images-alt"\f232"
  • dashicons-images-alt2"\f233"
  • dashicons-video-alt"\f234"
  • dashicons-video-alt2"\f235"
  • dashicons-video-alt3"\f236"
  • dashicons-image-crop"\f165"
  • dashicons-image-rotate-left"\f166"
  • dashicons-image-rotate-right"\f167"
  • dashicons-image-flip-vertical"\f168"
  • dashicons-image-flip-horizontal"\f169"
  • dashicons-undo"\f171"
  • dashicons-redo"\f172"
  • dashicons-editor-bold"\f200"
  • dashicons-editor-italic"\f201"
  • dashicons-editor-ul"\f203"
  • dashicons-editor-ol"\f204"
  • dashicons-editor-quote"\f205"
  • dashicons-editor-alignleft"\f206"
  • dashicons-editor-aligncenter"\f207"
  • dashicons-editor-alignright"\f208"
  • dashicons-editor-insertmore"\f209"
  • dashicons-editor-spellcheck"\f210"
  • dashicons-editor-distractionfree"\f211"
  • dashicons-editor-kitchensink"\f212"
  • dashicons-editor-underline"\f213"
  • dashicons-editor-justify"\f214"
  • dashicons-editor-textcolor"\f215"
  • dashicons-editor-paste-word"\f216"
  • dashicons-editor-paste-text"\f217"
  • dashicons-editor-removeformatting"\f218"
  • dashicons-editor-video"\f219"
  • dashicons-editor-customchar"\f220"
  • dashicons-editor-outdent"\f221"
  • dashicons-editor-indent"\f222"
  • dashicons-editor-help"\f223"
  • dashicons-editor-strikethrough"\f224"
  • dashicons-editor-unlink"\f225"
  • dashicons-editor-rtl"\f320"
  • dashicons-align-left"\f135"
  • dashicons-align-right"\f136"
  • dashicons-align-center"\f134"
  • dashicons-align-none"\f138"
  • dashicons-lock"\f160"
  • dashicons-calendar"\f145"
  • dashicons-visibility"\f177"
  • dashicons-post-status"\f173"
  • dashicons-edit"\f464"
  • dashicons-trash"\f182"
  • dashicons-arrow-up"\f142"
  • dashicons-arrow-down"\f140"
  • dashicons-arrow-right"\f139"
  • dashicons-arrow-left"\f141"
  • dashicons-arrow-up-alt"\f342"
  • dashicons-arrow-down-alt"\f346"
  • dashicons-arrow-right-alt"\f344"
  • dashicons-arrow-left-alt"\f340"
  • dashicons-arrow-up-alt2"\f343"
  • dashicons-arrow-down-alt2"\f347"
  • dashicons-arrow-right-alt2"\f345"
  • dashicons-arrow-left-alt2"\f341"
  • dashicons-sort"\f156"
  • dashicons-leftright"\f229"
  • dashicons-list-view"\f163"
  • dashicons-exerpt-view"\f164"
  • dashicons-share"\f237"
  • dashicons-share-alt"\f240"
  • dashicons-share-alt2"\f242"
  • dashicons-twitter"\f301"
  • dashicons-rss"\f303"
  • dashicons-email"\f465"
  • dashicons-email-alt"\f466"
  • dashicons-facebook"\f304"
  • dashicons-facebook-alt"\f305"
  • dashicons-googleplus"\f462"
  • dashicons-networking"\f325"
  • dashicons-hammer"\f308"
  • dashicons-art"\f309"
  • dashicons-migrate"\f310"
  • dashicons-performance"\f311"
  • dashicons-wordpress"\f120"
  • dashicons-wordpress-alt"\f324"
  • dashicons-pressthis"\f157"
  • dashicons-update"\f463"
  • dashicons-screenoptions"\f180"
  • dashicons-info"\f348"
  • dashicons-cart"\f174"
  • dashicons-feedback"\f175"
  • dashicons-cloud"\f176"
  • dashicons-translation"\f326"
  • dashicons-tag"\f323"
  • dashicons-category"\f318"
  • dashicons-yes"\f147"
  • dashicons-no"\f158"
  • dashicons-no-alt"\f335"
  • dashicons-plus"\f132"
  • dashicons-minus"\f460"
  • dashicons-dismiss"\f153"
  • dashicons-marker"\f159"
  • dashicons-star-filled"\f155"
  • dashicons-star-half"\f459"
  • dashicons-star-empty"\f154"
  • dashicons-flag"\f227"
  • dashicons-location"\f230"
  • dashicons-location-alt"\f231"
  • dashicons-vault"\f178"
  • dashicons-shield"\f332"
  • dashicons-shield-alt"\f334"
  • dashicons-sos"\f468"
  • dashicons-search"\f179"
  • dashicons-slides"\f181"
  • dashicons-analytics"\f183"
  • dashicons-chart-pie"\f184"
  • dashicons-chart-bar"\f185"
  • dashicons-chart-line"\f238"
  • dashicons-chart-area"\f239"
  • dashicons-groups"\f307"
  • dashicons-businessman"\f338"
  • dashicons-id"\f336"
  • dashicons-id-alt"\f337"
  • dashicons-products"\f312"
  • dashicons-awards"\f313"
  • dashicons-forms"\f314"
  • dashicons-testimonial"\f473"
  • dashicons-portfolio"\f322"
  • dashicons-book"\f330"
  • dashicons-book-alt"\f331"
  • dashicons-download"\f316"
  • dashicons-upload"\f317"
  • dashicons-backup"\f321"
  • dashicons-clock"\f469"
  • dashicons-lightbulb"\f339"
  • dashicons-desktop"\f472"
  • dashicons-tablet"\f471"
  • dashicons-smartphone"\f470"
  • dashicons-smiley"\f328"

How to Use Dashicons

Dashicons are really easy to use, here are simple instructions and examples on how to use dashicons. If you've used FontAwesome the syntax and usage is exactly the same.

<span class="dashicons dashicons-search"></span>
span.myicon {content: "\f179";}

To use in your WordPress themes you can add the following code snippet to your functions.php to include the CSS and fonts automaticall.

 
wp_enqueue_style('dashicons-style', get_stylesheet_uri(), array('dashicons'), '1.0');
 

My website and its content are free to use without the clutter of adverts, tracking cookies, marketing messages or anything else like that. If you enjoyed reading this article, or it helped you in some way, all I ask in return is you leave a comment below or share this page with your friends. Thank you.

About the Author

Tim Trott

Tim is a professional software engineer, designer, photographer and astronomer from the United Kingdom. You can follow him on Twitter to get the latest updates.

Further Reading
Leave a Reply

Your email address will not be published.