Wiki source code of Add an Icon Picker
Last modified by Eleni Cojocariu on 2026/08/25 16:23
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Let the reader of a form choose an icon of [[the XWiki Icon Set>>doc:documentation.xs.admin.icons.icon-set.WebHome]] from a list instead of typing its name, by attaching the [[Icon Picker>>doc:documentation.xs.dev.icons.icon-picker.WebHome]] to the input field. | ||
| 2 | |||
| 3 | 1. Give the input field an ##id##, or a CSS class shared by the fields the picker applies to((( | ||
| 4 | {{code language="none"}} | ||
| 5 | {{html}} | ||
| 6 | <p>Icon: <input type="text" id="iconField"/></p> | ||
| 7 | {{/html}} | ||
| 8 | {{/code}} | ||
| 9 | ))) | ||
| 10 | 1. Call the ##iconPicker## macro after the field, naming that ##id##, and set ##prefix## to the text the chosen name is written behind((( | ||
| 11 | {{code language="none"}} | ||
| 12 | {{iconPicker id="iconField" prefix="image:icon:"/}} | ||
| 13 | {{/code}} | ||
| 14 | ))) | ||
| 15 | 1. Save the page | ||
| 16 | 1. Click the field. The picker opens under it, listing the icons of the theme named in "Preview with:", and clicking one writes that name into the field behind the prefix, as follows:((( | ||
| 17 | {{image reference="icon-picker-open.png" size="large" alt="A text field with the icon picker open underneath it, listing named icons above a Preview with selector"/}} | ||
| 18 | ))) |
