Matt Keys

Justin Kruit

<p>Add a <a href="http://fontawesome.com/" rel="nofollow ugc">Font Awesome</a> icon field type to Advanced Custom Fields.</p>
<ul>
<li>Specify which FontAwesome icon sets to use (Solid, Regular, Light, Thin, Duotone, Duotone Sharp, Brands, and Custom Upload Icons) (Some features only available with FontAwesome 5.x or 6.x icons)</li>
<li>Create your own custom filtered list of FontAwesome icons to use with your fields. Use different custom icon sets with different fields</li>
<li>Returns Icon Element, Icon Class, Icon Unicode, or an Object including the element, class, unicode value, and SVG data (if applicable)</li>
<li>Optionally enqueues Font Awesome in footer where needed (when a FontAwesome field is being used on the page))</li>
<li>Integrates with the <a href="https://docs.fontawesome.com/apis/graphql" rel="nofollow ugc">FontAwesome GraphQL</a> for loading your <a href="https://docs.fontawesome.com/web/setup/use-kit" rel="nofollow ugc">FontAwesome Kits</a>, searching for icons, and loading the latest version of FontAwesome</li>
</ul>
<p>Note: It is recommended to let this plugin enqueue the latest version of Font Awesome on your front-end; or include the latest version yourself using your <a href="https://docs.fontawesome.com/web/setup/use-kit" rel="nofollow ugc">FontAwesome Kit</a>; so that available icons in the admin area will be displayed properly on your sites front-end.</p>
<h4>Compatibility</h4>
<p>This ACF field type is compatible with:<br />
* ACF 5.7+<br />
* FontAwesome 4.x, 5.x, 6.x and 7.x fonts</p>
<h3>Optional Configuration</h3>
<h3>Filters</h3>
<ul>
<li><strong>ACFFA_always_enqueue_fa</strong>: Return true to always enqueue FontAwesome on the frontend, even if no ACF FontAwesome fields are in use on the page. This will enqueue FontAwesome in the header instead of the footer.</li>
<li><strong>ACFFA_admin_enqueue_fa</strong>: Return false to stop enqueueing FontAwesome in the admin area. Useful if you already have FontAwesome enqueued by some other means.</li>
<li><strong>ACFFA_get_icons</strong>: (Applies to FontAwesome 4.x and 5.x icons only) Filter the array of icons and icon details loaded from the database</li>
<li><strong>ACFFA_get_fa_url</strong>: Filter the URL used for enqueuing FontAwesome in the frontend and admin areas of the site.</li>
<li><strong>ACFFA_override_major_version</strong>: Filter to manually set the ‘major’ version of FontAwesome to load (accepts either 4, 5, or 6). NOTE: This filter must be registered before any calls to ACF get_field() function are made.</li>
<li><strong>ACFFA_fa_api_key</strong>: Filter to programmatically set the FontAwesome API key.</li>
<li><strong>ACFFA_fa_kit_token</strong>: Filter to programmatically set the FontAwesome kit token.</li>
</ul>


Advanced Custom Fields: Font Awesome Field

Thank you for sharing this plugin with us


I used the plugin within my own custom plugin and was impressed with the quality of the code and the functionality of the plugin. I asked the developer for support and he got back to me within hours.Advised.


Great plugin quality and excellent support

Excellent Support

Adds a new 'Font Awesome Icon' field to the popular Advanced Custom Fields plugin.

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.

Advanced Custom Fields: Font Awesome Field vs NM Font Awesome