customize edit toolbar icons

[Dolly]

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)

[Tanika02 · Accepted solution]

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.