WP Manifestindependent plugin directory
manifest / developer / registering-custom-icons-7-1

WP 7.1 Font Awesome Icons

Demo plugin: registers a custom icon collection and icons for the Icon block using the WordPress 7.1 icon registration API.

by Ryan Welcher · github.com/ryanwelcher/registering-custom-icons-7-1

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/ryanwelcher/registering-custom-icons-7-1/archive/refs/heads/trunk.zip
Readme github.com/ryanwelcher/registering-custom-icons-7-1 ↗

WP 7.1 Font Awesome Icons (demo)

A minimal demo plugin for the custom icon registration API that shipped in WordPress 7.1. It registers a font-awesome icon collection and a handful of Font Awesome Free icons, which then appear in the core Icon block (core/icon) picker.

Requires WordPress 7.1 or newer. The API lives in core, so the Gutenberg plugin is not required. The plugin header sets Requires at least: 7.1, so WordPress will refuse to activate it on older sites rather than silently doing nothing.

What it demonstrates

  • wp_register_icon_collection( $slug, $args ) — create a named set (label + description).
  • wp_register_icon( $icon_name, $args ) — register an icon as collection/icon-slug with a label and either a file_path or inline content.
  • wp_get_icon( $name, $args ) — render a registered icon's SVG server-side (used here by a [fa_icon] shortcode).

Icons always belong to exactly one collection and are identified as {collection-slug}/{icon-slug} (e.g. font-awesome/heart). The core collection is core/, labelled "WordPress" in the picker.

Slugs must start and end with a lowercase letter or digit, and may contain lowercase letters, digits, hyphens and underscores in between.

Try it in WordPress Playground

▶ Try it in WordPress Playground — opens a live WordPress 7.1 site with this plugin already active, on a demo page with a few Font Awesome icons placed. Insert an Icon block, open the icon picker, and the "Font Awesome" collection is there in the Collections list alongside the WordPress core icons.

The link points at blueprint.json, which pins WordPress 7.1 and installs this plugin from wp71-fontawesome-icons.zip.

The blueprint installs the plugin from the committed wp71-fontawesome-icons.zip, so rebuild that zip whenever the plugin changes (it must contain a top-level wp71-fontawesome-icons/ folder):

rm -rf build && mkdir -p build/wp71-fontawesome-icons
cp wp71-fontawesome-icons.php build/wp71-fontawesome-icons/
cp -r icons build/wp71-fontawesome-icons/
( cd build && zip -rq ../wp71-fontawesome-icons.zip wp71-fontawesome-icons -x '*.DS_Store' )
rm -rf build

The Playground link reads from raw GitHub, so the updated blueprint.json and zip must be pushed to trunk for it to reflect changes.

Manual install

  1. Make sure the site is running WordPress 7.1 or newer.
  2. Copy this folder to wp-content/plugins/ and activate it.
  3. Insert an Icon block and pick a Font Awesome icon, or use the shortcode: [fa_icon name="font-awesome/heart" label="I heart WordPress"]

Sample block markup:

<!-- wp:icon {"icon":"font-awesome/heart"} /-->

Adding your own icons

Drop an .svg into /icons, then add a slug => label entry to the $icons array in wp71-fontawesome-icons.php. The label is what the picker search matches on (there is no separate per-icon keywords field).

Licensing

The bundled icons are from Font Awesome Free and are licensed CC BY 4.0 (https://fontawesome.com/license/free). The attribution comment is preserved inside each SVG. Plugin code is GPL-2.0-or-later.