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.

sydcode

This plugin adds support for 18 free icon fonts (over 6000 icons).
<a href="https://developer.wordpress.org/resource/dashicons/" rel="nofollow ugc">Dashicons</a> (218 icons) 
<a href="http://www.elegantthemes.com/blog/resources/elegant-icon-font" rel="nofollow ugc">Elegant</a> (360 icons) 
<a href="http://elusiveicons.com/" rel="nofollow ugc">Elusive</a> (304 icons) 
<a href="https://github.com/danielbruce/entypo" rel="nofollow ugc">Entypo</a> (284 icons) 
<a href="http://fortawesome.github.io/Font-Awesome/" rel="nofollow ugc">Font Awesome</a> (519 icons) 
<a href="http://zurb.com/playground/foundation-icon-fonts-3" rel="nofollow ugc">Foundation</a> (284 icons) 
<a href="http://genericons.com/" rel="nofollow ugc">Genericons</a> (147 icons) 
<a href="https://icomoon.io/icons-icomoon.html" rel="nofollow ugc">IcoMoon Free</a> (491 icons) 
<a href="http://ionicons.com/" rel="nofollow ugc">Ionicons</a> (734 icnons) 
<a href="http://map-icons.com/" rel="nofollow ugc">Map Icons</a> (176 icons) 
<a href="http://materialdesignicons.com/" rel="nofollow ugc">Material Design</a> (1062 icons) 
<a href="http://mfglabs.github.io/mfglabs-iconset/" rel="nofollow ugc">MFG Labs</a> (186 icons) 
<a href="https://octicons.github.com/" rel="nofollow ugc">Octicons</a> (179 icons) 
<a href="https://useiconic.com/open/" rel="nofollow ugc">Open Iconic</a> (229 icons) 
<a href="http://pfefferle.github.io/openwebicons/" rel="nofollow ugc">OpenWeb</a> (118 icons) 
<a href="http://tenbytwenty.com/?xxxx_posts=sosa" rel="nofollow ugc">Sosa</a> (122 icons) 
<a href="http://themify.me/themify-icons" rel="nofollow ugc">Themify</a> (352 icons) 
<a href="http://typicons.com/" rel="nofollow ugc">Typicons</a> (336 icons)
Each font is freely distributed under an open source licence. 
Contact the author of a font if you have questions about using it.
Credits: 
<a href="http://jaicab.com/Sosa-Icon-Font-CSS/" rel="nofollow ugc">Jaime Caballero</a> for his Sosa stylesheet. 
<a href="https://gist.github.com/pnull/4510484" rel="nofollow ugc">pnull</a> for his Entypo stylesheet.

Icon Fonts

This plugin adds support for 18 free icon fonts (over 6000 icons).

e.nigma buttons vs Icon Fonts