Change Accordion Icon

Is there anyway to change the accordion icon? I want to change it from the plus signs to the client’s logo icon - I have the below class code, but not sure where to put it or how to do it.

.fl-accordion-button-icon {
background-image: url(“http://allcarenavigators.com/wp-content/uploads/2015/06/Favicon.png”);
}

Any suggestions?

Thanks!!
Anne

Hey Anne,

If you are using our theme, you can place that CSS in the customizer via the code tab. Even better if you have the child theme installed, you can place it directly into the style.css file via the editor available under appearance in your dashboard. From there, go and visit the page where you have your accordion module. Go into editing mode and then place fl-accordion-button-icon in the ID section under the advanced tab of the accordion modules and save. Let me know if that works for you!

Best,
Billy

Ok. I do have the child theme activated and I did exactly as you said - here is what is in my child theme’s style sheet:

/*
Theme Name: All Care Navigators Child Theme
Theme URI: http://bludesignshop.com
Version: 1.0
Description: Child theme used for custom development.
Author: Blu Design Shop
template: bb-theme
*/

/* Add your custom styles here… */

.fl-accordion-button-icon {
background-image: url(“http://allcarenavigators.com/wp-content/uploads/2015/06/Favicon.png”);
}

I then went and put ‘fl-accordion-button-icon’ in the id section on the advanced tab of the accordion, and they’re not showing up. Did I input something incorrectly?

Thanks so much!

Hi Anne,
A dot in front of fl-accordion-button-icon indicates it is a class not an ID
A # symbol signifies an ID
HTH, Dave

Thanks, Dave. I have .fl-accordion-button-icon in the Class section, and I still don’t see any change in the icon.

Hi Anne,

If you mean in the class field for the accordion module, then you need to leave off the dot - it is assumed. Because this is the class field you just put the name of the class in there.

Regards, Dave

Removed the . and this is what I get: http://allcarenavigators.com/our-services/. Plus signs are also still there. Am I missing some sort of style in the code that specifies it to be contained within the icon table cell? I’ve tried adding some css styling but it still wasn’t getting me anywhere. Sorry to keep dragging this out…

Not sure, I had a play with a test site here, but no cigar!
Firstly I don’t think that putting the class in the advanced section of the module does anything, as that is already the class for each entry.
Secondly I’m questioning if it will work as is, as you are trying to overwrite the font awesome entry:
<i class=“fl-accordion-button-icon fa fa-plus”></i>
Thirdly I’m not sure if using background-image is correct in this context!
So I think it is best to wait for Billy or Ben to get back tomorrow, they are better at this than me :slight_smile: But I love a challenge, but can’t help further…

Cheers, Dave

Hey Anne,

Sorry but changing the plus sign on our accordion won’t be easy. Try these CSS snippets and see if it works for you.

/*Change BB accordion plus sign*/
.fl-accordion-button .fl-accordion-button-icon {
  display: none;
}
.fl-accordion-item {
  position: relative;
}
span.fl-accordion-button-label:after {
  content: '';
  width: 24px;
  height: 24px;
  background-image: url(http://localhost/wp-content/uploads/2015/08/Favicon.png);  
  background-size: cover;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -12px;/*Should be half the value of the height above*/
}

If you want to change a specific accordion set, just add a class to that accordion module and place the class in front the classes above, e.g., .sample-class .fl-accordion-item and .sample-class span.fl-accordion-button-label:after. I might as well add this to the CSs KB. :slight_smile:

Ben

I couldn’t get that to work for me (which doesn’t mean much because I very well could have done something wrong). :slight_smile:

I did, however, figure out a workaround. I created a button image with the icon on it, and then I set the button-icon to 0 opacity. Will this be ok (clean, etc). I’m not an expert at css snippets, and I just don’t want anything to break, etc.

.fl-accordion-button {
background-image: url(“http://allcarenavigators.com/wp-content/uploads/2015/08/fl-accordion-button.jpg”);
background-size: cover;
}

.fl-accordion-button-icon {
opacity: 0;
}

As always, Thanks for the help!!
Anne

Hey Anne,

That should work too! But as you can see, it’s not responsive. On mobile, the icon on the right side is gone.

The reason why the previous code didn’t work might be because I forgot to tell you the URL of the background-image needs to be changed. Try this snippet instead, you may need to remove the styling you have above.

/*Change BB accordion plus sign*/
.fl-accordion-button {
  width: 100%;
  position: relative;
}
.fl-accordion-button .fl-accordion-button-icon {
  display: none;
}
span.fl-accordion-button-label:after {
  content: '';
  width: 24px;
  height: 24px;
  background-image: url(http://allcarenavigators.com/wp-content/uploads/2015/06/Favicon.png);  
  background-size: cover;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -12px;/*Should be half the value of the height above*/
}

I’ve already changed the URL here so all you need to do is just copy and paste it. :slight_smile:

Ben

Darn responsive websites! :slight_smile: Wasn’t thinking mobile yet. Shame on me.

So I took out all other coding I had created and just copy/pasted your above code, and everything disappears. This particular snippet kills everything else:

.fl-accordion-button .fl-accordion-button-icon {
display: none;
}

Hey Anne,

I don’t know why but it seems the content part on your stylesheet got changed. Must be from copying and pasting. Check the screenshot below.
http://imgur.com/6uWOnn6

Simply change that to content: '';. Those are just 2 single quotations and a semicolon. :slight_smile:

Ben

Aaaah! I’m such a novice. Definitely a copy/paste issue. Changed it up and it works perfectly now!

You guys are seriously awesome! To have helped me with all of this was going WAY above and beyond.

THANK YOU!!!
Anne

No worries! Enjoy BB! :slight_smile:

Ben