Docs

[spud1114]

I am setting up a site and I want the closed/open icons to be different then what is currently setup in the theme.

I just about have the accordion setup the way I need it except the icons (I want them to be like the files I attached).

Any ideas?

Here is the page
http://www.m-powercoaching.com/dev/leadership-with-intention/

[Rahul]

Hey There,

Thanks for writing in!

Kindly walk-through this thread : https://community.theme.co/forums/topic/change-toggle-icon-and-icon-color/

Hope this helps!

Let us know how this goes!

[spud1114]

Thanks!

I saw this, however I do not see how to change the icon to an image since the icon I want to use could not be replaced with a character.

[Nabeel A]

Hi again,

Try adding the following code in your child theme’s style.css file:

.x-accordion-heading .x-accordion-toggle:before {
    content: url(path/to/closed.png) !important;
}

Change the image path with your image URL. Your other image cannot be added since accordion is using a single item that is rotated when it’s open.

Thank you for understanding!

[spud1114]

Thanks!

But you can use both images. Here is how I did it:

`
/* Change Icon of Toggle and color when open */
.x-accordion-heading .x-accordion-toggle:before {
content: url(http://www.m-powercoaching.com/dev/wp-content/uploads/2016/09/plus.png) !important;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

/* Toggle Icon Color when closed*/
.x-accordion-heading .x-accordion-toggle.collapsed:before {
content: url(http://www.m-powercoaching.com/dev/wp-content/uploads/2016/09/minus.png) !important;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

[Joao]

HI There,

Glad to hear you found a solution and thanks for the input.

Thanks

Joao

[Author]

Posts