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 7.0)
  • 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.
  • 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.
  • 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