Menu icon Foundation

My Posts

No Content

My Comments

Carlos Morán commented on pixelkai's post over 4 years

Hello!

I was working on a project where I need to do what Darryl is asking, and I found that the answer is as simple as adding the 'right' class to the

<a href="#panel1">Title<span class="fa accordion-icon right"></span></a>

Carlos Morán commented on pixelkai's post over 5 years

I was able to add an icon using CSS only

//The accordion is closed
.accordion-icon:before {
    content: "\f0d7";
}
//The accordion is open
.active .accordion-icon:before {
    content: "\f0d8";
 }
<a href="#panel1">Title<span class="fa accordion-icon"></span></a>

With .accordion-icon:before and .accordion-icon:before being copies of Font Awesome's fa-caret-down:before and fa-caret-up:before

So in your case you should need

<a href="#panel1"><span class="faq-icon my-icon-class" ></span>Panel 1</a>

And on the CSS file you add a copy of icon-plus2 on ".my-icon-class" and a copy of icon-minus2 on ".active .my-icon-class" (don't forget to add the selector/other stuff to leave the classes just like the one in your icon font css)

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on pixelkai's post over 4 years

Hello!

I was working on a project where I need to do what Darryl is asking, and I found that the answer is as simple as adding the 'right' class to the

<a href="#panel1">Title<span class="fa accordion-icon right"></span></a>

You commented on pixelkai's post over 5 years

I was able to add an icon using CSS only

//The accordion is closed
.accordion-icon:before {
    content: "\f0d7";
}
//The accordion is open
.active .accordion-icon:before {
    content: "\f0d8";
 }
<a href="#panel1">Title<span class="fa accordion-icon"></span></a>

With .accordion-icon:before and .accordion-icon:before being copies of Font Awesome's fa-caret-down:before and fa-caret-up:before

So in your case you should need

<a href="#panel1"><span class="faq-icon my-icon-class" ></span>Panel 1</a>

And on the CSS file you add a copy of icon-plus2 on ".my-icon-class" and a copy of icon-minus2 on ".active .my-icon-class" (don't forget to add the selector/other stuff to leave the classes just like the one in your icon font css)

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content