Powered by

# Font Awesome picker 1.0.0+

# Basic usage 

<xf:macro name="tc_clib_fa_picker_macros::fa_picker"
          arg-name="icon" arg-value="far fa-gavel"
          arg-row="true" />

Basic usage
Basic usage

# Arguments of tc_clib_fa_picker_macros::fa_picker macro

Argument Default value Description
name The value of the name attribute of the input field.
value The value of the rowtype attribute for the xf:formrow tag.
required false The value of the required attribute of the input field.
readonly false The value of the readonly attribute of the input field.
disabled false The value of the disabled attribute of the input field.
controlId The value of the id attribute of the input field.
row true If true, the input field will be wrapped in the xf:formrow tag.
label The value of the label attribute for the xf:formrow tag.
hint The value of the hint attribute for the xf:formrow tag.
explain The value of the explain attribute for the xf:formrow tag.
html The value of the html attribute for the xf:formrow tag.
rowclass The value of the rowclass attribute for the xf:formrow tag.
rowtype The value of the controlid attribute for the xf:formrow tag.
boxBeforeInput false If true, the icon preview will be displayed to the left of the input field.
triggerInput false If true, double-clicking on the input field will open the icon selection menu.
noBox false If true, the icon preview block will not be displayed and the menu will be opened by double clicking on the input field.
variant 1.0.5+ Default icon variation. Available variants: duotone, light, regular, solid.

# TeslaCloud.FontAwesomePicker (tc-fa-picker)

# Arguments

Argument Default value Description
faIconInput | .input Icon class input field selector.
box | .js-faPickerBox Icon preview block selector.
trigger | .js-faPickerTrigger Icon selection menu trigger selector.
triggerInput false If true, double-clicking on the input field will open the icon selection menu.
noBox false If true, the icon preview block will not be displayed and the menu will be opened by double clicking on the input field.

# Examples

# Opening menus with custom triggers

To add a custom trigger, the js-faPickerTrigger class must be added to the element.
Example of using a button as a trigger:

<xf:css src="public:tc_clib_fa_picker.less" />
<xf:comment>For XenForo 2.1.0+:</xf:comment>
<xf:js src="TC/ComponentLibrary/fa_picker.js" addon="TC/ComponentLibrary" min="1" />
<xf:comment>For XenForo 2.3.0+:</xf:comment>
<xf:js src="TC/ComponentLibrary/font_awesome.js" addon="TC/ComponentLibrary" min="1" />

<xf:formrow>
    <div class="inputGroup tc-fa-picker" data-xf-init="tc-fa-picker" data-no-box="true">
        <xf:button fa="fa-search" class="js-faPickerTrigger">Choose icon</xf:button>

        <xf:textbox name="test" dir="ltr" />
    </div>
    <xf:macro name="tc_clib_fa_picker_macros::fa_picker_menu" />
</xf:formrow>

Custom trigger
Custom trigger