Insert Font Awesome Icons Into the Block Editor via the JVM Gutenberg Rich Text Icons Plugin

Joris van Montfort, a freelance WordPress developer, released the JVM Gutenberg Rich Text Icons plugin over the weekend. The goal was simple: allow users to insert icons nearly anywhere in the block editor at the click of a button.

The plugin uses version 4.7 of the Font Awesome library out of the box. However, developers can modify this to include custom icon sets.

Like many of the most useful plugins, it stays in its lane, performing a simple task and doing it well. The plugin presents users with a “flag” button in the editor toolbar whenever they edit a Rich Text field.

Inserting an icon into a Rich Text field in the WordPress editor.
Inserting an icon into a Heading block.

Rich Text is a block editor component for entering text. Anywhere users can type in the editor canvas is fair game for inserting an icon. This includes paragraphs, headings, image captions, and more. It also extends to blocks from other plugin developers. If they employ a Rich Text field anywhere, the “flag” button will appear, and users can plop an icon in it.

Icons inserted through the plugin automatically inherit the surrounding text size. If you stick it in a Heading block, it will grow larger. If you stick it in a Button block, it will match up with the Button text. The same is true for the colors too.

Testing icons in different blocks in the WordPress editor.
Inserting icons in various blocks at different sizes and colors.

Because it is impossible to match each theme’s design perfectly, some minor spacing or alignment adjustments may be needed. For the most part, the icons looked good when I tested them with various themes. However, there were a couple of one-pixel-off issues and minor alignment miscues with some blocks. On the whole, I did not run into any design-breaking issues. The plugin displayed its icons as it should.

One usability issue I encountered was being unable to delete an icon via the Backspace or Delete keys on my keyboard in use with the Buttons block. It worked well with other blocks. The solution for this was to click on the inserted icon. Then, select the “flag” icon in the toolbar to reopen the inserter. After choosing no replacement, the old one disappeared.

The plugin developer provided filter hooks for third-party developers to implement icon sets other than Font Awesome via a custom JSON file. Instructions are outlined in the plugin’s readme. There are also hooks for uploading or overwriting the stylesheet and classes.

While I like the plugin’s execution, I dislike that it loads its own Font Awesome stylesheet. If using another plugin or theme that does the same, its inclusion increases the page load size for end-users by loading multiple copies of the same code. This is not the fault of the plugin developer. It is a limitation created by WordPress’s lack of a dependency system. However, users who give the plugin a try should be mindful of this potential issue.

6 responses to “Insert Font Awesome Icons Into the Block Editor via the JVM Gutenberg Rich Text Icons Plugin”

  1. This one is doing the job and it optionally loads Font Awesome on back-end or front-end –

    https://wordpress.org/plugins/block-for-font-awesome/

    I do think that a rich-text option is good, though, as since the block editor, nothing can be added inline. If I can’t rely on the plugin above for various reasons, I insert the Font Awesome SVG via HTML mode. It takes a bit of time, but it’s worth it from a performance point of view.

    • Yep, it’s a good solution too. What we need is for the two plugin authors to get together and combine their projects. Rich Text insertion + block-level icons would be a nice combination.

      • That is true.

        I see Font Awesome working on a plugin for ages, and it IS the most used icon library out there.

        A good plugin is a must, and it needs to do the job. Simple, light, something that goes as a dependency with every website I build.

      • It would be pretty easy to add a dedicated icon block to this plugin, but is there really any need for a dedicated icon block if you kan insert them in practically all existing blocks with text options?

        • From a user-experience perspective, it would be nice. On the block level, it would be just a single icon, which essentially lives in a box. I envision all sorts of design elements, such as text/background colors, alignments, size, shadows, etc. Sure, users could recreate much of this with something like dropping an icon in a Paragraph block and adjusting its block options. However, getting from Point A to Point B makes sense with a dedicated block in some cases.

  2. GenerateBlocks does SVG icons really well in most respects. You have control over size, color and positioning, and you can add any SVG.

    But this plugin does add functionality where I currently have to DIY, or not do. I don’t often use icons in places outside of GenerateBlocks buttons or headlines, but when I do I wish I had an equally simple option.

    I know you can also add entire sets of icons to an asset library in GenerateBlocks (this might be a pro feature), but haven’t yet explored whether it’s possible to import Font Awesome or similar libraries.

    In any case, it’s good to see plugin developers iterating on general ideas. Even when it’s a little thing, if it’s something I do repeatedly that without the plugin takes 10x the time, I’m interested (as long as it doesn’t negatively impact site speed or user experience!).

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: