layout | title | description | date | redirect_from | tags | initial-release | last-updated-release |
---|---|---|---|---|---|---|---|
acs-aem-commons_feature |
Icon Picker |
Add visual icon picker to dialogs |
2015-08-25 |
/acs-aem-commons/features/icon-picker.html |
aem-65 aem-cs |
2.0.0 |
4.0.0 |
In version 2.1.0 the default
fa
CSS class has been removed. If you have created a custom Font Awesome generic list using 2.0.0, you will need to prefix each value with thefa
CSS class.
Adds a visual icon selection to AEM Component Dialogs.
The following wrapper Client Library node definition must be used to enable this feature.
A Generic List must be created to hold the available icons. One is provided containing all icons in Font Awesome 4.4.0 icons, but projects will likely want to provide their own lists with the appropriate subset of icons. The value of each list item is the icon class name (e.g. fa fa-film
).
Ensure that the appropriate font is available on your site. This can be done by adding the client library category acs-commons.fontawesome
as a dependency for your site's main client library.
For Touch UI, add a component definition to your dialog with a sling:resourceType
of acs-commons/components/authoring/graphiciconselect
. It must have a datasource
child node which loads the icon list. For example:
<icon xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
fieldLabel="Icon" name="./icon"
sling:resourceType="acs-commons/components/authoring/graphiciconselect">
<datasource jcr:primaryType="nt:unstructured"
path="/etc/acs-commons/lists/font-awesome-icons"
sling:resourceType="acs-commons/components/utilities/genericlist/datasource"/>
</icon>
In your component code, output the appropriate markup, e.g.
<c:if test="${!empty properties.icon}"><i class="${properties.icon}"></i></c:if>
In order to use an icon font other than Font Awesome, you must do the following:
- Create a Generic List as described above pointing to the specific icon classes.
- Point the widget/component at your Generic List.
- Create a new Client Library with the categories
cq.widgets
andcq.authoring.dialog
with the CSS required for the specific font. For a specific example download this package which enables Brandico