Alexander Lueken

<p>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</p>
<p>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.</p>
<p>e.nigma buttons allows you to easily create those visually attractive buttons using a simple shortcode environment.</p>
<p>Development of the plugin is an open process. The current version is available on github:</p>
<p>https://github.com/chemiker/enigma-buttons</p>
<p>Feel free to contribute and to fix errors or send improvements via github.</p>
<h3>Shortcodes & Attributes</h3>
<p><em>e.nigma buttons</em> adds the shortcode <code>[button]</code> to your installation. The following options can be used to adjust the button for your needs:</p>
<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>
<p>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>.</p>
<p>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 <em>e.nigma buttons</em> 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.</p>
<h4>Colors</h4>
<p>The following colors are avaible:<br />
* green<br />
* orange<br />
* purple<br />
* cyan<br />
* white<br />
* red<br />
* black</p>
<p>In addition to those values you can also use a hex color code (e.g. #ff3600)</p>
<h4>Icons</h4>
<p><em>e.nigma buttons</em> 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.</p>
<h4>Examples</h4>
<pre><code>[button label="My GitHub account" icon="github" color="orange" link="https://github.com/chemiker"]
</code></pre>
<p>Brings you an linked, medium-sized, orange button that has a GitHub icon and the label “My GitHub account”.</p>
<pre><code>[button icon="github" color="orange" link="https://github.com/chemiker" size="large"]
</code></pre>
<p>Brings you an orange, large-sized, linked GitHub icon.</p>


e.nigma buttons

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

Mykhailo Nykoliuk

<p>NM Font Awersome makes it easy to add vector icons and social logos from <a href="https://fontawesome.com/" rel="nofollow ugc">Font Awesome</a> to your website. And version 5 is redesigned and built from the ground up!</p>
<h4>Usage</h4>
<p>Font Awesome version 5 icons can be any of 4 different styles, each with its own prefix.<br />
In the free version of the plugin, you can use only 2 styles:<br />
* <strong>Solid</strong>, with style prefix <code>fas</code><br />
* <strong>Brands</strong>, with style prefix <code>fab</code></p>
<p>Read the documentation <a href="https://fontawesome.com/how-to-use/svg-with-js#additional-styling" rel="nofollow ugc">Additional Styling Classes</a> to use the plug-in’s features 100%.</p>
<p><strong>NM Font Awersome gives you 2 ways of usage:</strong></p>
<h4>1) SHORTCODE</h4>
<pre><code>[nm_fa name="fas fa-camera-retro"]

[nm_fa name="fas fa-camera-retro fa-2x"]

[nm_fa name="fas fa-cog fa-spin"]
</code></pre>
<p>Where the name is the name of the class of the icon that you want to add.</p>
<p>A complete list of icons you can find on <a href="https://fontawesome.com/icons" rel="nofollow ugc">Font Awesome</a>.</p>
<h4>2) TINYMCE</h4>
<p>Select the desired icon in the drop-down menu.</p>
<h4>3) HTML</h4>
<p>To access the HTML editor, click on the “HTML” link on the tab at the top right of the text editor window in WordPress.<br /> If you don\’t know how to use Font Awesome in HTML, you can read <a href="https://fontawesome.com/how-to-use/svg-with-js#basic-use" rel="nofollow ugc">Font Awesome Basic Use</a>.</p>
<p><strong>Coming soon</strong></p>
<p>In the near future there will be a PRO version, where you can use all Awesome Icons.</p>


NM Font Awesome

Wordpress plugin that adds the latest version 5 of Font Awesome into your WordPress project.

e.nigma buttons vs NM Font Awesome