The easiest way to integrate Font Awesome into your WordPress project.
- Introduction
- Features
- Installation
- Usage
- Initialization Parameters
- Shortcode
- The Better Font Awesome Library Object
- Filters
- To Do
- Credits
The Better Font Awesome Library allows you to automatically integrate the latest available version of Font Awesome into your WordPress project, along with accompanying CSS, shortcode, and TinyMCE icon shortcode generator. Furthermore, it generates all the data you need to create new functionality of your own.
- Automatically fetches the most recent available version of Font Awesome, meaning you no longer need to manually update the version included in your theme/plugin.
- Generates an easy-to-use PHP object that contains all relevant info for the version of Font Awesome you're using, including: version, stylesheet URL, array of available icons, and prefix used (
icon
orfa
). - CDN speeds - Font Awesome CSS is pulled from the super-fast and reliable jsDelivr CDN.
- Includes a TinyMCE drop-down shortcode generator.
- Includes a local copy of Font Awesome to use as a fallback in case the remote fetch fails (or you can specify your own with the
bfa_fallback_directory_path
filter). - Utilizes transients to optimize for speed and performance.
The Better Font Awesome Library should ideally be installed via Composer:
composer require mickey-kay/better-font-awesome-library
Alternately, you can install the library manually, which can be useful for development and/or custom builds:
git clone https://github.com/MickeyKay/better-font-awesome-library.git
cd better-font-awesome-library
npm run build
-
Copy the /better-font-awesome-library folder into your project.
-
Add the following code to your main plugin file or your theme's functions.php file.
add_action( 'init', 'my_prefix_load_bfa' );
/**
* Initialize the Better Font Awesome Library.
*
* (see usage notes below on proper hook priority)
*/
function my_prefix_load_bfa() {
// Include the main library file. Make sure to modify the path to match your directory structure.
require_once ( dirname( __FILE__ ) . '/better-font-awesome-library/better-font-awesome-library.php' );
// Set the library initialization args (defaults shown).
$args = array(
'include_v4_shim' => false,
'remove_existing_fa' => false,
'load_styles' => true,
'load_admin_styles' => true,
'load_shortcode' => true,
'load_tinymce_plugin' => true,
);
// Initialize the Better Font Awesome Library.
Better_Font_Awesome_Library::get_instance( $args );
}
- If desired, use the Better Font Awesome Library object to manually include Font Awesome CSS, output lists of available icons, create your own shortcodes, and much more.
The Better Font Awesome Library is designed to work in conjunction with the Better Font Awesome WordPress plugin. The plugin initializes this library (with its own initialization args) on the init
hook, priority 5
. When using the Better Font Awesome Library in your project, you have two options:
- Initialize later, to ensure that any Better Font Awesome plugin settings override yours (this is the default behavior, shown above by initializing the library on the
init
hook with default priority10
. - Initialize earlier, to "take over" and prevent Better Font Awesome settings from having an effect.
The following arguments can be used to initialize the library using Better_Font_Awesome_Library::get_instance( $args )
:
(boolean) Include the Font Awesome v4 shim CSS stylesheet to support legacy icon.
true
false
(default)
(boolean) Attempts to remove existing Font Awesome styles and shortcodes. This can be useful to prevent conflicts with other themes/plugins, but is no guarantee.
true
false
(default)
(boolean) Automatically loads Font Awesome CSS on the front-end of your site using wp_enqueue_scripts()
.
true
(default)false
- use this if you don't want to load the Font Awesome CSS on the front-end, or wish to do it yourself.
(boolean) Automatically loads Font Awesome CSS on the admin of your site using admin_enqueue_scripts()
.
true
(default)false
- use this if you don't want to load the Font Awesome CSS in the admin, or wish to do it yourself.
(boolean) Loads the included [icon]
shortcode.
true
(default)false
(boolean) Loads a TinyMCE drop-down list of available icons (based on the active Font Awesome version), which generates an [icon]
shortcode.
true
(default)false
The library now always defaults to the latest available version of Font Awesome.
(string) Which version of Font Awesome you want to use.
'latest'
(default) - always use the latest available version.'3.2.1'
- any existing Font Awesome version number.
The library now always defaults to minified CSS.
(boolean) Use minified Font Awesome CSS.
true
(default) - uses minifed CSS.false
- uses unminified CSS.
If either the $args['load_shortcode']
or $args['load_tinymce_plugin']
initialization arg is set to true
, then the Better Font Awesome Library will include an [icon]
shortcode that can be used as follows:
[icon name="star" class="2x spin" unprefixed_class="my-custom-class"]
The unprefixed icon name (e.g. star). The version-specific prefix will be automatically prepended.
Unprefixed Font Awesome icon classes. The version-specific prefix will be automatically prepended to each class.
Any additional classes that you wish to remain unprefixed (e.g. my-custom-class).
The specific icon style (e.g. brand
vs. solid
) to use.
The following shortcode:
[icon name="moon" style="solid" class="2x spin" unprefixed_class="my-custom-class"]
. . . will produce the following HTML:
<i class="fas fa-moon fa-2x fa-spin my-custom-class "></i>
The Better Font Awesome Library object can be accessed with the following code:
Better_Font_Awesome_Library::get_instance();
The object has the following public methods:
(string) Returns the active version of Font Awesome being used.
(string) Returns the Font Awesome stylesheet URL.
(string) Returns the Font Awesome v4 shim stylesheet URL.
(array) Returns an associative array of icon hex values (index, e.g. \f000) and unprefixed icon names (values, e.g. rocket) for all available icons in the active Font Awesome version.
(array) Returns icon data in the exact format provided by the Font Awesome GraphQL API.
(array) Returns icon asset (CSS/JS) data for the latest Font Awesome version.
(string) Returns the version-dependent prefix ('fa' or 'icon') that is used in the icons' CSS classes.
(array) Returns all library errors, including API and CDN fetch failures.
The library no longe relies on the jsDelivr CDN.
(object) Returns version data for the remote jsDelivr CDN (uses jsDelivr API). Includes all available versions and latest version.
// Initialize the library with custom args.
Better_Font_Awesome_Library::get_instance( $args );
// Get the active Better Font Awesome Library Object.
$my_bfa = Better_Font_Awesome_Library::get_instance();
// Get info on the Better Font Awesome Library object.
$version = $my_bfa->get_version();
$stylesheet_url = $my_bfa->get_stylesheet_url();
$prefix = $my_bfa->get_prefix();
$icons = $my_bfa->get_icons();
// Output all available icons.
foreach ( $icons as $icon ) {
echo $icon . '<br />';
}
The Better Font Awesome Library applies the following filters:
Applied to the initialization arguments after they have been parsed with default args, but before they are used to fetch any Font Awesome data.
Parameters
$init_args
(array)
Applied to arguments passed to all wp_remote_get()
calls (useful for adjusting the timeout if needed).
Parameters
$wp_remote_get_args
(array)
Applied to the path for the fallback release data JSON file. Can be used to specify an alternate fallback data file.
Parameters
$fallback_release_data_path
(string)
This value controls how often the plugin will check for the latest updated version of Font Awesome. Can be used to increase/decrease the frequency of this check as desired.
Parameters
$api_expiration
(int) (default:WEEK_IN_SECONDS
)
Applied to the icon array after it has been generated from the Font Awesome stylesheet, and before it is assigned to the Better Font Awesome Library object's $icons
property.
Parameters
$icons
(array)
Applied to the classes that are output on each icon's <i>
element.
Parameters
$class
(string)
Applied to the tag that is output for each icon. Defaults is 'i', which outputs <i>
.
Parameters
$tag
(string)
Applied to the entire <i>
element that is output for each icon.
Parameters
$output
(string)
Applied to the boolean that determines whether or not to suppress all Font Awesome warnings that normally display in the admin.
Parameters
$show_errors
(true)
This is now replaced by the similar bfa_fallback_release_data_path
filter.
Applied to the fallback directory path before setting up any fallback CSS info. Can be used to specify an alternate fallback directory to replace the default fallback directory.
The path must be to a local, non-remote, directory.
Parameters
$path
(string)
This data now comes from the GraphQL API. The new bfa_release_data_transient_expiration
replaces this legacy filter.
Applied to the API (version information) transient expiration. Can be used to increase/decrease the expiration as desired.
Parameters
$api_expiration
(int)
This data is now no longer necessary.
Applied to the CSS stylesheet data transient expiration. Can be used to increase/decrease the expiration as desired.
Parameters
$css_expiration
(int)
There should no longer be a need to force a fallback.
Applied to the boolean that determines whether or not to force the included fallback version of Font Awesome to load. This can be useful if you're having trouble with delays or timeouts.
Parameters
$force_fallback
(false)
Given the update to v5+ always, there should be no need to modify the icon prefix.
Applied to the Font Awesome prefix ('fa' or 'icon') before it is assigned to the Better Font Awesome Library object's $prefix
property.
Parameters
$prefix
(string)
Ideas? File an issue or add a pull request!
- Add README section on manually updating the fallback version.
- Remove existing FA? - move to later hook so that it works for styles enqueued via shortcode (= wp_footer basically)
Special thanks to the following folks and their plugins for inspiration and support:
- Font Awesome Icons by Rachel Baker
- Font Awesome More Icons by Web Guys
- Font Awesome Shortcodes by FoolsRun
- Dmitriy Akulov and the awesome folks at jsDelivr
And many thanks to the following folks who helped with testing and QA: