wordpress-icon-font

A font which includes some of the most popular WordPress Icons. View Demo

Usage no npm install needed!

<script type="module">
  import wordpressIconFont from 'https://cdn.skypack.dev/wordpress-icon-font';
</script>

README

Wordpress Plugin Icon Font

A font which includes some of the most popular WordPress Icons.
View Demo

Installing the icons in your project

Download fonts and stylesheets

  • Unzip the downloaded file
  • Copy the font files to your fonts/webfonts directory
  • Copy the CSS files (To save loading times I reccommend only copying the minified file) to your css directory
  • Include the css file in the <head> of your project
  • You're should be ready to use the icons now
  • Don't forget to apply the aria-label="Plugin Name" if you're using the icon on it's own

Using the icons

<i class="wp-plugin-yoast"></i> Yoast SEO
<span class="wp-plugin-ithemes-security" aria-label="iThemes Security"></span>
<a href="#" class="wp-plugin-jetpack"></a>

Current icons

  • Advanced Custom Fields
  • Contact Form 7
  • Divi Builder
  • iThemes Security
  • Jetpack
  • LearnPress
  • Yoast SEO
  • Askimet
  • W3 Total Cache
  • WP Smush
  • Wordfence
  • Woo Commerce
  • Updraft
  • Duplicator
  • Ninja Forms

Requesting new icons

Request Icons Here and add the label 'Icon Request'

Changelog

Version 1.0.0

  • Initial Version

Version 1.0.1

  • Added scss files for install
  • Improved demo page to include Aria Labels for each icon
  • Added these icons:
    • Askimet & Alt
    • Advanced Custom Fields Alt
    • W3 Total Cache
    • WP Smush
    • Wordfence
    • Woo Commerce
    • Updraft
    • Duplicator
    • Ninja Forms

Updates as/when I get time

  • Creating a better demo page
  • Adding more icons

🍺 Buy me a pint

It's greatly appreciated!

License

Free to use however you like. Go nuts!
If you're using wp-plugin-fonts, let me know on Twitter I'd love to see it in action!