• We've added extra Spam Protection. if you get problem with account registration / registration rejected. please contact us

Iconify integration 0.0.3

No permission to download
This add-on is for style developers and add-on coders.

Important: this add-on is not ready to be used in production yet. This is early release that might (and probably does) contain bugs. It was developed for XenForo 2.1, though it should work with XenForo 2.0 too.

It adds support for Iconify, offering over 30,000 icons to choose from. Icons can be used for node icons, navigation or anything else add-on or style author can think of (requires creating add-on that depends on this add-on). Authors are no longer limited to using FontAwesome icons.

Basic usage

To add icon to template there is no need to do anything fancy. All you have to do is write Iconify placeholder code like this:

<iconify-icon data-icon="mdi:home"></iconify-icon>


<span class="iconify" data-icon="mdi:home"></span>

See Iconify documentation.

You can change icon dimensions by changing font-size or adding
data-width and/or data-height attributes. You can change icon color by
changing font color.

Tutorials: how to use custom dimensions, how to transform icons.

Advanced usage

However this add-on's main feature is not basic usage. Basic code can be
achieved by simply adding Iconify script tag without this add-on.

What this add-on does is makes it possible to select icons inside XenForo.

Icon style property and option

One of features is icon style property. When creating new style property there is a new property type: icon.


You can pick icon, pick color for colourless icons (or you can disable
color picker by unchecking "Show color picker" option). To create icon
style property all you have to do is select "Icon" in style property
types selection.

Icon style properties look like this in admin panel:


There is a new option type: Icon. It is pretty much identical to style property type.

To create Icon option create new option, select "Icon" from option format list:



Then pick default icon and set options and create new option.

Icon option in options list looks the same as icon style property in style properties list:


How to use icons in templates

After you have created new style property or option, you'd want to use
it in some template. Important: icons are not meant for stylesheet, they
should be used only in HTML templates.

To add icon you need to use "icon" or "inlineicon" XenForo template tag:

<xf:icon value="{$xf.options.text_test_option}" />
<xf:inlineicon value="{$xf.options.text_test_option}" />
<xf:icon value="{{ property('iconify_required_prop') }}" />
<xf:inlineicon value="{{ property('iconify_required_prop') }}" /><br />

First 2 lines show how to use option, last 2 lines show how to use style property.

What's the difference between "icon" and "inlineicon"? "icon" tag
behaves like image, so it is intended for decorations. "inlineicon"
behaves like text, so it is intended to be used inside text, like custom
smilies or reactions.

See tutorial that explains difference between inline and block modes.

Creating custom variables

What if you want to create custom variable instead of option or style property? You can do that too.

This add-on adds 2 more tags:


These tags are almost identical to XenForo's "textbox" and "textboxrow".

Value is JSON string.

I will edit this page to add description for iconbox and iconboxrow later.
First release
Last update
4.50 star(s) 2 ratings

More resources from Frank

Latest updates

  1. Quick fix for uninstallation via cmd.php

    This update fixes small issue in uninstallation when it is done via cmd.php that was missed in...