Add Font Awesome icons in WordPress

Font Awesome Pro brings Free and Pro icons to WordPress pages, posts, and templates. Choose the latest release or a specific release, then insert icons with the block editor, classic-editor shortcodes, or standard Font Awesome HTML.

Choose an icon source

A Font Awesome Kit can provide icons including the latest Duotone styles and custom icons from Pro Kits. To use Pro icons in the Icon Chooser, configure a Pro Kit: create the Kit, select Pro icons in its options, then add your Font Awesome API Token in the extension settings.

The CDN option supports Version 5 icons only. It serves Free icons by default. To use Pro icons with the CDN, add your website domain to the allowed-domain list in your CDN settings, then insert icons with shortcodes or HTML. The Icon Chooser can search and add Free icons with the CDN; Pro icon search and insertion there requires a Pro Kit.

Insert icons with your editor

In the block editor, add a Font Awesome Icon block and choose an icon. The Icon Chooser searches by name, category, or keyword, and lets you change the family and style before insertion. You can also add icons inline with text from the format toolbar; inline insertion requires WordPress 6.3 or later. Icons inserted through the chooser can be previewed and styled in the editor.

In the classic editor, use an icon name in a shortcode or add basic HTML with standard Font Awesome syntax. The shortcode does not require the fa- part of the icon name. If you omit a style prefix, it uses the Classic Solid style. For example: [icon name="stroopwafel"].

Handle older syntax and version conflicts

Automatic compatibility supports Font Awesome Version 4 syntax for websites or plugins that still use it. If icons show unexpectedly, the conflict detection scanner can identify Font Awesome versions loaded by themes or other plugins, display which versions are active, and let you prevent conflicting versions from loading.

Set up the extension

Install and activate the plugin, then open Font Awesome settings to choose a Kit or the CDN and configure the source. The default setup serves Free icons as a web font through the CDN. After configuring a source, add icons through the block editor, classic-editor shortcodes, or HTML.