Template tags

Available from v2.0.0

Css tag

The stylesheets (or Font Awesome Kit) of your presets, place it in the <head>. Not needed for Iconify and SVG files presets or :svg output.

{exp:reinos_iconfont:css}                 {!-- all presets --}
{exp:reinos_iconfont:css preset="1|3"}    {!-- only these presets --}

Field tag and modifiers

Tag	Output
{my_icon}	fa-solid fa-house, the stored value
{my_icon:html}	<i class="fa-solid fa-house" aria-hidden="true"></i> (inline svg for Iconify and SVG files presets)
{my_icon:svg}	the icon as inline <svg>
{my_icon:url}	https://api.iconify.design/fa6-solid/house.svg, or the url of the file for SVG files
{my_icon:name}	house
{my_icon:provider}	font_awesome, material, material_symbols, iconify or custom
{my_icon:total_icons}	the number of icons

:svg works for Iconify, SVG files, Font Awesome (v5 names are mapped to v6), Material Icons and Material Symbols. The SVG is loaded from the Iconify API once and cached in system/user/cache/reinos_iconfont/svg (sanitized SVG files in svg_files). Custom fonts fall back to the html.

Parameters

Parameter	Description
class	Extra class
size	Size of the icon, e.g. 24 or 2em
style	Inline style
title	Accessible name, adds role="img" and aria-label. Without a title the icon is aria-hidden
separator	Between multiple icons, default nothing for :html and :svg and , for :name and :url
format	html, svg, url or name on the single tag, for places without modifiers like Pro Variables

{my_icon:svg size="32" class="text-primary" title="Home"}

Multiple icons

With Multiple icons enabled, loop over the icons with a tag pair:

<ul>
{my_icons size="20"}
    <li>{icon_html} {icon_name}</li>
{/my_icons}
</ul>

Variables: {icon}, {icon_html}, {icon_svg}, {icon_url}, {icon_name}, {count}, {total_results}. The backspace parameter is supported.

Icon tag

Output an icon without a field:

{exp:reinos_iconfont:icon preset="1" icon="fa-solid fa-star" format="svg" size="16" title="Favorite"}

Parameter	Description
preset	The preset id
icon	The icon
format	html (default), svg, url or name
class, size, style, title	See above