[Kraig WParticipant]

How might I go about modifying the look and feel of the accordion button? The default just seems to be a “+” and the accordion item title, but what I’d like it to be is an image. I’d also like to remove the border. Is there a way to do this using CSS?

[RubinKeymaster]

Hey Kraig,

you could add some custom css and achieve this in the Customizer > Custom > CSS field:

.x-accordion-group { border: none; box-shadow: none; -webkit-box-shadow: none; }

as for the icon change. I would recommend replacing the icon with a different icon from our icon library you can find here. When using a background image the image will look fuzzy on retina devices which is something you should try to prevent. Just tell me which icon you would like and I will tell you what you have to add to your CSS field.

[Kraig WParticipant]

Let’s use [icon type=”align-justify”]

… I want it to control the expansion of a menu… the justify icon looks kind of like a menu I guess.

Using our logo would be better. There’s no way around the retina displays? Using a higher quality image wouldn’t work?

Thanks

[KoryKeymaster]

Unfortunately, there is no full cross-browser compatibility (yet) for resizing background images, so it will look inconsistent across devices and browsers. Your best bet in this case to ensure it looks sharp on retina devices would be to use an icon for sure.

The adjustment for the icon you mentioned can be replaced with this:

.x-accordion-heading .x-accordion-toggle:before {
content: "\f039";
-webkit-transform: none;
   -moz-transform: none;
    -ms-transform: none;
     -o-transform: none;
        transform: none;
}

Thanks!

[Kraig WParticipant]

http://screencast.com/t/kN2aexym5

That last bit of code just displays f039 in the accordion instead of the icon.

Let me know too in your reply what that number is referring to so I can locate a different icon through FTP instead of needing to ask to make a change.

[Kraig WParticipant]

… I guess I’d also like to know how to alter the icon once they click it… like have a down arrow when it’s closed and then an up arrow when it’s open. It seems like that ability to ‘toggle’ is possible.

[KoryKeymaster]

Hey Kraig,

I’m going to assume you entered that last bit of CSS in the Customizer, as this is an error that occurs when using unicode characters in there. You’ll need to implement this CSS via a child theme for it to function properly.

You can easily find other values to enter in by going to the Font Awesome website, clicking on Icons and browsing their selection. When you’ve found one you like, click on it, and look for the Unicode label. It should be a 4 character string, which you can take and replace in the content property for the CSS snippet above. Make sure you keep the backslash, too.

You can alter the icon for two different states like so:

.x-accordion-heading .x-accordion-toggle.collapsed:before {
  content: "\f039";
}

.x-accordion-heading .x-accordion-toggle:before {
  content: "\f039";
  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;
}

The first statement is for the closed state, while the second is for the open state. You can change out the icons in this way.

Thanks!

[Marita LParticipant]

I would like to change my accordion icon to a heart, what custom css would I need in order to do this?

Thanks a million.

[KoryKeymaster]

Hey Marita,

Try out the following CSS:

body .x-accordion-heading .x-accordion-toggle:before {
  content: "\f004";
}

Thanks!

[Marita LParticipant]

Ooops, this didn’t work…This code ended up replacing the + in the accordion with the numbers “f004″
I tried inserting the [icon type=”heart”] but that just went back to the + icon.

[KoryKeymaster]

Hey Marita,

You will need to implement this CSS via a child theme as the Customizer does not accept unicode characters. There is an article in the Knowledge Base that goes over how to setup a child theme if you have any questions about this process.

Thanks!

[Marita LParticipant]

Alright, after I get my child theme installed, where, with-in the editor do insert the code?

[RubinKeymaster]

Hey Martia,

now you have a style.css file in the child theme folder and in there is an @import statement. Place the code above the @import statement and let me know if it worked.

[Marita LParticipant]

Hello,

This is what my style.css sheet has in it now. Did I do it correctly? The + icon is still there instead of a heart.

/*

Theme Name: X – Child Theme: Icon
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to Icon in this child theme.
Version: 1.0.0
Template: x

*/
body .x-accordion-heading .x-accordion-toggle:before {
content: “\f004”;
}
@import url( ‘../x/framework/css/site/stacks/icon.css’ );

So appreciate it!

[RubinKeymaster]

Hey,

looks fine maybe try to clear your cache since it should be overwritten now.

[Author]

Posts