Wiki source code of Add an Icon to a Page
Last modified by Eleni Cojocariu on 2026/03/19 07:54
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | To add an icon to a page, follow these steps: | ||
| 2 | |||
| 3 | == Using the WYSIWYG editor == | ||
| 4 | |||
| 5 | 1. [[Edit the page with the WYSIWYG editor>>doc:documentation.xs.user.base.page.edit-page.edit-standalone-wysiwyg-editor.WebHome]] | ||
| 6 | 1. Type ##/icon ##in the editor to filter the [[quick actions>>doc:extensions:Extension.CKEditor Integration.WebHome||anchor="HQuickActions"]] and select the "Embed an icon" entry((( | ||
| 7 | {{image reference="icon-macro-dropdown-highlighted.png" alt="Dropdown showing the list of quick actions. The option to select is highlighted" caption="Dropdown showing the list of quick actions. The option to select is highlighted" size="medium"/}} | ||
| 8 | ))) | ||
| 9 | 1. Pick the name of the icon to add. The list uses the text input to filter icons by name((( | ||
| 10 | {{image reference="icon-macro-picker.png" alt="List of icon names to pick from, filtered by the text 'p'" size="medium"/}} | ||
| 11 | ))) | ||
| 12 | 1. Check the result.((( | ||
| 13 | {{image reference="icon-macro-add-page-result.png" alt="Pencil icon inserted in a line of text" size="medium"/}} | ||
| 14 | ))) | ||
| 15 | 1. (Optional) If you want to specify [[some advanced parameters of this icon>>doc:documentation.xs.user.icons.displayicon-macro.WebHome]], you can double click the icon in the WYSIWYG editor, and the macro edition dialog will open.((( | ||
| 16 | {{image reference="icon-macro-wysiwyg-editor.png" alt="Pencil icon inserted in a line of text" size="large"/}} | ||
| 17 | ))) | ||
| 18 | |||
| 19 | == Using the Wiki Editor == | ||
| 20 | |||
| 21 | 1. [[Edit the page with the Wiki editor>>doc:documentation.xs.user.base.page.edit-page.edit-wiki-editor.WebHome]] | ||
| 22 | 1. Type the syntax for using the Icon Macro, and [[specify the parameters>>doc:documentation.xs.user.icons.displayicon-macro.WebHome]]. For example:((( | ||
| 23 | {{code language="none"}} | ||
| 24 | Use the {{displayIcon name="pencil"/}} button above | ||
| 25 | {{/code}} | ||
| 26 | ))) | ||
| 27 | 1. Save the page and check the result. For example:((( | ||
| 28 | {{image reference="icon-macro-add-page-result.png" alt="Pencil icon inserted in a line of text" size="medium"/}} | ||
| 29 | ))) |
