JVM Gutenberg Rich Text Icons

説明

Add inline icons to rich text fields like: paragraphs, headings, lists or buttons anywhere in the Gutenberg block editor.

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

This plugin ships with the free Font Awesome 4.7 icon set as default icon set. I am aware this is not the most recent version but 4.7 is entirely free and works fine for my projects mostly. If you want to use some other icon set or a custom created icon set, keep reading.

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.

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. If you want to use a custom 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
By default the Font Awesome 4.7 icon set is loaded from: wp-content/plugins/jvm-richtext-insert-icons/src/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');

評価

2021年12月7日
Does what it should do, and nothing more (and that is what we want from good plugins). It comes with some filters that are handy for those who don't want to load FA assets or add BS icons or w/e.
2021年9月16日
It works really well, and it's very flexible. I wish it had a dedicated block as an additional option for those cases where we just one to add an icon without depending on any other blocks (like Paragraph). Still, it does its job, so it's a 5-stars.
2021年5月14日
This is exactly what I needed to bring the reader's eye to a text paragraph inviting them to follow us on a few socmed platforms. The inserted icons are subtle, but effective... and responsive!
2021年3月25日
Thank you so much for the plugin, Joris! I am using a modded version of this plugin to insert a custom icon pack that I created. It was so easy to configure. You have my utmost respect for this amazing plugin.
2021年3月25日
Even though the plugin could not be activated due to a syntax error (which I fixed it - to be more accurate - bypassed it), it eliminates the need for me to create a similar block with ACF Pro for my projects, so thank you for this plugin.
6件のレビューをすべて表示

貢献者と開発者

JVM Gutenberg Rich Text Icons はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“JVM Gutenberg Rich Text Icons” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.0.5

Added a hook for modifying the editor javascript file loaded for advanced users.
Example usage:

function add_my_js_file($file) {
    $file = '/path_to_my/js_file.js';
    return $file;
}

add_filter( 'jvm_richtext_icons_editor_js_file', 'add_my_js_file');

1.0.4

Bug fix: Replaced the deprecated block_editor_settings hook by the new block_editor_settings_all hook. This fixes a deprecated notice.

1.0.3

New feature: ACF field for the JVM icon set loaded.
New feature: Font icon config file can now also ben in fontello format

1.0.2

Bugfix: Changed backend asset loading to load only on new posts and edit post pages. In version 1.0.1 scripts for this plugin loaded on all backend pages and kept breaking the widget text editor.

1.0.1

Php error fix for some php versions on plugin activation.

1.0.0

Initial release

Stable

1.0.0