customize edit toolbar icons

I want to perform following actions in the Edit Toolbar:

1. Place Inplace editing (Edit- pencil icon) at the end of the toolbar

2. Change the Pencil icon to a image icon

How do I achieve this? Thanks in advance

(using AEM as a cloud service)

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Tanika02

Hello @dolly

To change the icon for the Inplace Editing action, you'll need to create a custom client library and override the default CSS.

Make sure that you have the custom image available as part of the resources of the custom client library and then you can use the below CSS code : .cq-editrollover-bar .cq-editrollover-edit {
background-image: url(/apps/myproject/clientlibs/images/my-image.png);
}

Next, In the categories property of the custom client library folder, add the value cq.authoring.editor. This ensures that your client library is included when editing content.

Tanika02Accepted solution

Level 7

To change the icon for the Inplace Editing action, you'll need to create a custom client library and override the default CSS.

Make sure that you have the custom image available as part of the resources of the custom client library and then you can use the below CSS code : .cq-editrollover-bar .cq-editrollover-edit {
background-image: url(/apps/myproject/clientlibs/images/my-image.png);
}

Next, In the categories property of the custom client library folder, add the value cq.authoring.editor. This ensures that your client library is included when editing content.

Sign up