CODEWITHSUNDEEP
csszurb-foundation
robce
robce

Reputation: 65

Custom arrow up/down Accordion Vertical Menu Foundation 6

How can i change in Foundation 6 for the Accordion Vertical Menu the standard arrow (up/down) to a Custom-Icon Arrow up/down?

Thank you.

Upvotes: 1

Views: 2383

Answers (2)

Josh Pule
Josh Pule

Reputation: 11

To get it to work with Font Awesome you need to add in your CSS:

font-family: "Font Awesome";

Thereafter you can add extra parameters like:

font-style: normal;
font-size: 20px;

Upvotes: 0

elicohenator
elicohenator

Reputation: 747

After looking in the Accordion's source code, you can change the content property of the arrow and override Foundation's default settings. this is the default property from Foundation's Docs: 

.accordion-title::before {
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top: -0.5rem;
    content: '+';
}

So, change the content property to whatever you like - Font Awesome, some html entity or anything else: 

.accordion-title::before {
    // Font Awesome implementation:
    content: "\f000";

    // HTML entity: 
    content:"\003e"; 
}

Happy Exploring :)

Upvotes: 3

Related Questions