UI.X 2

Icons

Overview

UI.X replaces the default FontAwesome icon set with Material Icons to be consistent with the material design styleguide that Google has laid out. This does not mean that you cannot use FontAwesome icons, as they are still loaded in. Furthermore, all of XenForo's mixins regarding iconography are untouched and still work as intended. You can visit https://materialdesignicons.com/ to see the full list of available icons.

Instead of re-using the default FontAwesome LESS mixins, we have re-created this functionality as a Macro. The advantage of the macro is that it can be used both in CSS, as well as to add an inline icon directly in the markup. The following are example use cases

• For use in LESS

  Copy.someIcon {
                      <xf:macro
                          template="uix_icons.less"
                          name="content"
                          arg-icon="account"
                      />
                  }

• For use in markup templates

  Copy<div>
                      <xf:macro
                          template="uix_icons.less"                        name="icon" 
                          arg-icon="account" 
                      />
                  </div>

The macro has 2 arguments, which are name and icon. To use the macro in LESS, set arg-name="content". To use the macro in markup, set arg-name="icon". The second argument is Icon. You can see a list of available icons to choose from in Style Properties → Icons. We have strived to name icons after their functional use, as opposed to their name in the icon font. This has been done so that they have functional meaning across any icon sets.

This menu allows you to input different strings of icons that you select by format which can be edited in the extra field of the Icon Font menu.

By default, UI.X uses 2 icon font sizes, which can be set in Icon font size and Icon large font size.

Icon font - Easily switch between icon sets. You are able to choose Material or Font Awesome based icons which will be used on your forum.

Load Material Icons locally - Loads the material icon font form local files as opposed to from the CDN.

Changing the icon font

We set up our macros set that they can easily accept any icon font given to them, and still work properly. You can change the icon font family and default styling in the Icon Font style property. You can then set the new content values for each icon.

LTR/RTL support

We allow administrators to specify icons either as LRT and RTL across their style. Any user using an opposite language of what an administrator selected to use to configure their style's icons will have the directionality of icons reversed. This means if an administrator is using LTR language and a user is using a RTL language, or vice versa, directional icons will be reversed. The advantage of this system is that administrators can configure the directionality of icons in their preference of either LTR or RTL and icons will adjust accordingly for their users. This can be configured with the Text Direction style property.