JPKCom DB
View on GitHub

JPKCom FA inline SVG shortcode — Guide & Tips

Output inline SVGs from Font Awesome (Pro) v5.15.4 via a WordPress shortcode — installation, Font Awesome setup and practical tips for the [jsvg] shortcode.

JPKCom FA inline SVG shortcode loads icons from Font Awesome (Pro) v5.15.4 as inline SVG and outputs them via a shortcode — fast and resource-efficient, with no webfont or JavaScript loader. Intended for anyone who wants to integrate the Font Awesome SVG-with-JS package into their WordPress site without fuss.

This is not an official Font Awesome plugin and is not directly affiliated with the vendor. Get a Font Awesome or Font Awesome Pro license at https://fontawesome.com/.

Guide

Requirements

  • WordPress 6.9 or newer (tested up to WordPress 7.1)
  • PHP 8.3 or newer
  • Your own copy of Font Awesome (Pro) v5.15.4 (via your Font Awesome license)
  • Multisite is supported (the plugin is network-enabled)

Installation

  1. In your admin panel, go to Plugins → Add New and click Upload Plugin.
  2. Choose the plugin's ZIP file and click Install Now.
  3. Download your version of Font Awesome (Pro) v5.15.4 from https://fontawesome.com/.
  4. Unpack the contents of the Font Awesome archive directly into a folder named jpkcom_fasvg/ under wp-content/uploads.
  5. Make sure the following files/folders are present: wp-content/uploads/jpkcom_fasvg/css/svg-with-js.min.css and wp-content/uploads/jpkcom_fasvg/svgs/*.
  6. Click Activate.

Usage

Place the shortcode in your content or in a menu item title:

[jsvg type="" name="" style="" class="" title=""]

Example:

[jsvg type="fal" name="jedi" style="margin:2rem" class="fa-10x" title="Obi-Wan Kenobi"]
  • type — the Font Awesome style family (e.g. fas, fal)
  • name — the icon name (e.g. jedi)
  • style — optional inline CSS
  • class — additional CSS classes (e.g. fa-10x, fa-rotate-270)
  • title — accessible title of the icon

The shortcode can also be used programmatically via do_shortcode():

<?php
echo do_shortcode( '[jsvg type="fas" name="snowboarding" class="fa-4x fa-rotate-270" title="Snowboarding"]' );

For more on do_shortcode(), see the WordPress function reference.

Tips & Tricks

  • Icon names map to SVG file names: The name value references the file in the respective style directory under svgs/. If the name doesn't match an existing SVG file, nothing is rendered.
  • Security of the name attribute: Since version 2.0.9 the name value is sanitized with sanitize_file_name()/basename() to prevent path traversal — slashes and path segments in the name won't work. The shortcode name [jsvg] and all its attributes are unchanged.
  • Callback renamed (2.0.16): The shortcode function used to be jsvg_code() — the only function in the plugin without a vendor prefix and without a function_exists() guard. Any theme or plugin declaring that name caused a fatal redeclare error. It is now jpkcom_fasvg_shortcode(); jsvg_code() remains as a deprecated shim so code calling it directly keeps working. If you call the function from your own code, move to the new name.
  • Multisite: per-site upload path (2.0.16): Up to 2.0.15 the icon folder's path and URL were resolved once while the plugin file was being included. The plugin is network-capable and each site in a network has its own upload directory, so the captured value pointed at the wrong site after a switch_to_blog(). The shortcode and the stylesheet now resolve per call through jpkcom_fasvg_path() / jpkcom_fasvg_url(). The constants JPKCOM_FASVG_PATH and JPKCOM_FASVG_URL stay for backwards compatibility.
  • Unique title IDs: Since 2.0.16 the id of the <title> element comes from wp_unique_id() instead of a random number. With a few dozen titled icons on one page a collision was unlikely but possible — and a duplicate id silently breaks aria-labelledby and is invalid HTML.
  • Usable in menu titles: Since the shortcode also works in menu item titles, you can enrich navigation entries with icons.
  • Font Awesome transform classes: Sizing and rotation utilities like fa-4x or fa-rotate-270 can be passed via the class attribute.
  • Icons in the block editor from WordPress 7.1 on: The post editor always renders its canvas in an iframe from WordPress 7.1. Up to version 2.0.13 the stylesheet was hooked to enqueue_block_editor_assets and therefore only reached the surrounding admin document — icons in a block preview would have lost their Font Awesome sizing rules and rendered at intrinsic size. Since 2.0.14 it hooks enqueue_block_assets and reaches both contexts; the non-iframed editor up to WordPress 7.0 behaves exactly as before. Front end and editor now share the handle jpkcom-fasvg-style — the former jpkcom-fasvg-gutenberg-style is gone. If your own code dequeued it or named it as a dependency, update that.
  • Reproducible updates: Since version 2.0.9 the plugin uses secure self-hosted updates via GitHub with SHA256 checksums and runs with declare(strict_types=1).

Further reading