Using Font Awewsome for accordion icons

When Magic Tabs displats an accordion, the expand and collapse icons are inserted as css:after content: property in the magic tabs block template css.

These can be changed by making a custom template.

CSS before changes

To make a custom template copy both css and php for one of the existing templates into a new template directory. Self contained starter is a good place to start, or maybe the bootstrap themes template if you are using elemental or similar:

CSS after changes

Web XSS security prevents you inserting html within a content: property, so you cant simply enter a font awesome tag. But you can trick it by directly entering font awesome character codes (or character codes for any icon font your theme supports). Here I have looked inside the font awesome style sheet to extract the character codes for folder open and folder close. I have also specified that the content: property uses the FontAwesome font.

The <link> part pulls in FontAwesome from a CDN. The <style> part overrides the style sheet to enforce the new icons. It could have been a little more efficient, but I wanted to keep the examples reasonably complete.