JVM Gutenberg Rich Text Icons

JVM Gutenberg Rich Text Icons

Wordpress plugin

Install on Wordpress

App Details

This plugin is a nice toolset for anyone wanting to integrate icons into the Gutenberg editor or options created with Advanced Custom Fields.

Add inline icons to rich text fields like: paragraphs, headings, lists or buttons anywhere in the Gutenberg block editor, or add a dedicated icon block from within the Gutenberg editor.

This plugin ships with the free Font Awesome icon set as default icon set. You can choose between version 4.x, 5.x and version 6.x.
This plugin also provides an easy to use interface for creating a custom icon set based on SVG icons. Custom icons can be upload from the plugin settings using an easy to use drag & drop uploader.

The plugin also creates a new field type for Advanced Custom Fields (ACF) : JVM Icon. Now you can create custom fields that work with a the font awsome icon set or even beter: A custom created icon set.

If font awesome or the built in custom icon set configurator do not meet your needs you can also create your own custom icon set and load it using hooks provided by the plugin.

The plugin simply inserts icons in the following HTML format:

<i class="icon fa fa-address-book" aria-hidden="true"> </i> 

The CSS class names and available icons can be all be modified to your liking if you are prepared to write some PHP hooks for your WordPress theme. Please note that you should keep the plugin settings set to use ‘Font Awesome 4.7’.
If you would like to load a custom created webfont or icon set you crafted yourself please read on. If you have the SVG files you can set the plugin settings to ‘Custom SVG icon set’ and upload your SVG files from the plugin settings.

CSS file
A slightly customized version of the Font Awesome 4.7 CSS file is loaded by default on the front end and backend to make the plugin work out of the box, but you can also choose Font Awesome Free version 5.x or 6.x from the settings screen.
If you want to use a custom created icon set it is advised to overide the icon set json file and CSS file using hooks provided by this plugin.

Custom icon set file
If the plugin is set to Font Awesome 4.7 icon set (default behaviour) the icons are loaded from: wp-content/plugins/jvm-richtext-insert-icons/dist/fa-4.7/icons.json. The json file contains all css classes that can be turned into icons by Font Awesome 4.7 CSS file. You can load a custom json icon set file by calling a filter hook in your (child) theme functions.php.
For example:

function add_my_icons($file) { $file = get_stylesheet_directory().'/path_to_my/icons.json'; return $file; } add_filter( 'jvm_richtext_icons_iconset_file', 'add_my_icons'); 

The icon config file can also be in fontello format since version 1.0.3. Have a look at: https://fontello.com to create your customized icon set.

Custom CSS file
By default the Font Awesome 4.7 CSS is loaded from: wp-content/plugins/jvm-richtext-insert-icons/dist/fa-4.7/font-awesome.min.css. You can load a custom CSS file for your icon set by calling a filter hook in your (child) theme functions.php.
For example:

function add_my_css($cssfile) { $cssfile = get_stylesheet_directory_uri().'/path_to_my/cssfile.css'; return $cssfile; } add_filter( 'jvm_richtext_icons_css_file', 'add_my_css'); 

If you choose the load your own CSS file and want to disable the default CSS file use the following code:

add_filter( 'jvm_richtext_icons_css_file', '__return_false'); 

All icon markup has the classname “icon” prefixed to the icon HTML inserted. If you want to use some other prefix you can add a filter. Like this:

function my_icon_class($css_class_name) { return 'my-custom-css-class-name'; } add_filter( 'jvm_richtext_icons_base_class', 'my_icon_class'); 

Use this hook to disable the entire plugin settings screen that was added in 1.0.9:

add_filter('jvm_richtext_icons_show_settings', '__return_false'); 

Please note that settings will still be loaded so please make sure you have set the settings to default font awesome if you are loading a custom icon set with the plugin hooks.

Pricing

Starting from $0 per month.

Check Out the Skill List Widget

By Common Ninja

Skill ListTry For Free!

App Info

Rating

Reviewers

9 reviews

Tags

editor
Font Awesome
gutenberg
icon set
icons

Developed By

Joris van Montfort

Quick & Easy

Find the Best Wordpress plugins for you

Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!

Testimonial

Testimonial plugins for Wordpress

Galleries

Galleries plugins for Wordpress

SEO

SEO plugins for Wordpress

Contact Form

Contact Form plugins for Wordpress

Forms

Forms plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Sliders

Sliders plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Comments

Comments plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Maps

Maps plugins for Wordpress

Security

Security plugins for Wordpress

Translation

Translation plugins for Wordpress

Ads

Ads plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Music Player

Music Player plugins for Wordpress

Backup

Backup plugins for Wordpress

Privacy

Privacy plugins for Wordpress

Optimize

Optimize plugins for Wordpress

Chat

Chat plugins for Wordpress

Countdown

Countdown plugins for Wordpress

Email Marketing

Email Marketing plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Membership

Membership plugins for Wordpress

popup

popup plugins for Wordpress

SiteMap

SiteMap plugins for Wordpress

Payment

Payment plugins for Wordpress

Coming Soon

Coming Soon plugins for Wordpress

Ecommerce

Ecommerce plugins for Wordpress

Customer Support

Customer Support plugins for Wordpress

Inventory

Inventory plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Testimonials

Testimonials plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Slider

Slider plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Membership

Membership plugins for Wordpress

Forms

Forms plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Contact

Contact plugins for Wordpress

Comments

Comments plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Common Ninja Apps

Some of the best Common Ninja plugins for Wordpress

Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.

Skill List for Wordpress logo

Skill List

Showcase your abilities with a structured skill list that highlights strengths clearly, builds credibility, and improves your chances of getting hired.

Cookie Banner for Wordpress logo

Cookie Banner

Use a Cookie Banner to inform visitors about cookies on your site and let them manage their consent in a clear, structured way.

Music Player for Wordpress logo

Music Player

Add a no-code music player to your site to stream audio, share playlists, and support multiple formats with easy setup.

Notification Popup for Wordpress logo

Notification Popup

Show alerts and updates with a notification popup that grabs attention, delivers important messages, and improves user experience.

Card Slider for Wordpress logo

Card Slider

Showcase content with a card slider that presents images, text, and buttons in a smooth, customizable layout to keep visitors engaged.

Form Builder for Wordpress logo

Form Builder

Create custom forms with a form builder that offers advanced field types, easy layout control, and flexible options for any purpose.

FAQ for Wordpress logo

FAQ

Add an FAQ section to your site to answer common questions, reduce support requests, and give visitors a smoother and more confident user experience.

GDPR Cookie Notice for Wordpress logo

GDPR Cookie Notice

Show a GDPR-ready cookie notice that clearly explains how cookies are used, helping you stay compliant while creating a more transparent experience for your visitors.

All In One Chat for Wordpress logo

All In One Chat

Add a unified chat tool to your site that connects users via WhatsApp, Messenger, Telegram, or email for seamless support.

Scroll to Top for Wordpress logo

Scroll to Top

A scroll to top button that helps visitors move back to the top of long pages quickly, improving navigation and overall browsing flow.

Airbnb Reviews for Wordpress logo

Airbnb Reviews

Show Airbnb reviews to build trust, improve credibility, and help visitors make confident booking decisions that support higher property sales.

Charts & Graphs for Wordpress logo

Charts & Graphs

Add charts and graphs to your site to present data clearly, help visitors understand insights faster, and support more confident decision making.

More plugins

plugins You Might Like

Discover Apps By Platform

Discover the best apps for your website

WordPress
Wix
Shopify
Weebly
Webflow
Joomla
PrestaShop
Shift4Shop
WebsiteX5
MODX
Opencart
NopCommerce

Common Ninja Search Engine

The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!

Multiple platforms