- Compatible XF Versions
- 2.0
- 2.1
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:
or
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:
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.
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:
Code:
<iconify-icon data-icon="mdi:home"></iconify-icon>
Code:
<span class="iconify" data-icon="mdi:home"></span>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:
Code:
<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 />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:
Code:
xf:iconbox
xf:iconboxrowValue is JSON string.
![[OzzModz] Iconify Buttons](/data/resource_icons/8/8633.jpg?1653122236){kind=icon}
