Alexander Lueken

e.nigma buttons is a lightweight plugin that adresses a common problem that applies to many WordPress users: Visually highlight a link (e.g. a download link). One great solution is the use of buttons
The purpose of a button is clear. You press that button and something happens. This is a well known principle that most users are aware of. In contrast to regular text links (e.g. a download link), buttons are more likely to be noticed, especially if you use them in combination with an icon.
e.nigma buttons allows you to easily create those visually attractive buttons using a simple shortcode environment.
Development of the plugin is an open process. The current version is available on github:
https://github.com/chemiker/enigma-buttons
Feel free to contribute and to fix errors or send improvements via github.
<h3>Shortcodes & Attributes</h3>
e.nigma buttons adds the shortcode <code>[button]</code> to your installation. The following options can be used to adjust the button for your needs:
<ul>
<li><code>label</code>: The label of your button</li>
<li><code>icon</code>: The icon of your button</li>
<li><code>link</code>: The link of your button</li>
<li><code>color</code>: The color of button</li>
<li><code>border</code>: yes (default) or no</li>
<li><code>size</code>: small, medium (default) or large</li>
<li><code>class</code>: Additional CSS classes that will be added to your buttons icon</li>
</ul>
Most of the shortcodes attributes are self explaining. However, it must be noted that the <code>icon</code> attribute can be filled by using modififed <a href="http://fontawesome.io/icons/" rel="nofollow ugc">Font Awesome shortcodes</a>.
For instance: If you want to use the GitHub icon you would search for that icon in the <a href="http://fontawesome.io/icons/" rel="nofollow ugc">list of all icons</a>. What you will find is the corresponding CSS class. For e.nigma buttons the name of the icon (which is obtained if stripping the “fa-” in the beginning of the CSS class) is used. For GitHub the CSS class would be <code>fa-github</code>. Thus, <code>github</code> is your value for the <code>icon</code> attribute.
<h4>Colors</h4>
The following colors are avaible: 
* green 
* orange 
* purple 
* cyan 
* white 
* red 
* black
In addition to those values you can also use a hex color code (e.g. #ff3600)
<h4>Icons</h4>
e.nigma buttons uses <a href="http://fontawesome.io/" rel="nofollow ugc">Font Awesome</a> by Dave Gandy as icon resource. <a href="http://fontawesome.io/icons/" rel="nofollow ugc">An overview over all available icons</a> can be found on their website.
<h4>Examples</h4>
<pre><code>[button label="My GitHub account" icon="github" color="orange" link="https://github.com/chemiker"]
</code></pre>
Brings you an linked, medium-sized, orange button that has a GitHub icon and the label “My GitHub account”.
<pre><code>[button icon="github" color="orange" link="https://github.com/chemiker" size="large"]
</code></pre>
Brings you an orange, large-sized, linked GitHub icon.

e.nigma buttons

e.nigma buttons allows you to easily add buttons to your posts, pages etc.

Joris van Montfort

A plugin / toolset for anyone wanting to integrate (SVG) 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 WordPress 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. 
The dedicated icon block contains several styling options to customize the icon in the icon block. 
The plugin also provides an easy to use interface for creating a custom icon set based on SVG icons. Custom icons can be uploaded from the plugin settings using an easy to use drag & drop uploader.
For users of Advanced Custom Fields (ACF) the plugin also creates a new field type: JVM Icon. This allows you to create custom fields that work with a the font awsome icon or any 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:
<pre><code> 
</code></pre>
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:
<pre><code>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');
</code></pre>
The icon config file can also be in fontello format since version 1.0.3. Have a look at: <a href="https://fontello.com" rel="nofollow ugc">https://fontello.com</a> 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:
<pre><code>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');
</code></pre>
If you choose the load your own CSS file and want to disable the default CSS file use the following code:
<pre><code>add_filter( 'jvm_richtext_icons_css_file', '__return_false');
</code></pre>
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:
<pre><code>function my_icon_class($css_class_name) {
 return 'my-custom-css-class-name';
}

add_filter( 'jvm_richtext_icons_base_class', 'my_icon_class');
</code></pre>
Use this hook to disable the entire plugin settings screen that was added in 1.0.9:
<pre><code>add_filter('jvm_richtext_icons_show_settings', '__return_false');
</code></pre>
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.

JVM Gutenberg Rich Text Icons

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.

Incredible and Highly Extensible

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.

Does one job, and does it well.

I can imagine something like this becoming part of core. Very well developed essential addon for the block editor

great gutenberg addon

Add Font Awesome icons, or icons from a custom icon set to rich text fields anywhere in the Gutenberg block editor!

e.nigma buttons vs JVM Gutenberg Rich Text Icons