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

XF2 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:




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


or

Code:
<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.








190213






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:








190214






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:






190215











190216






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:






190217






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 />



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:

Code:
xf:iconbox
xf:iconboxrow

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.
Author
Frank
Downloads
16
Views
285
First release
Last update
Rating
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...
Top
AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock