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:

/packages/jl_magic_tabs/blocks/jl_magic_tabs/templates/self_contained_starter/
to
/application/blocks/jl_magic_tabs/templates/your_template_name/

Then in the last few lines of the template, look for

/* + to indicate expandable */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a:after {
   content: "+";
   font-weight:900;
   float: right;
   text-decoration: none;
   font-size:140%;
}
/* - to indicate collapsible */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a.jl_magic_tabs_self_contained_starter_active:after {
   content: "-";
}

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.

/* + to indicate expandable */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a:after {
   content: "\f07b";
   font-family: "FontAwesome";
   font-weight:900;
   float: right;
   text-decoration: none;
   font-size:140%;
}
/* - to indicate collapsible */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a.jl_magic_tabs_self_contained_starter_active:after {
   content:"\f07c"; 
}

 

How its done on this page - the dirty tricks department

I have actually played a few tricks on this page to achieve the same without creating a new template. Immediately above the first tab is an html block containing:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</link>
<style>
/* + to indicate expandable */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a:after  {
   content: "\f07b" !important;
   font-family: "FontAwesome" !important;
   font-weight:900;
   float: right;
   text-decoration: none;
   font-size:140%;
}
/* - to indicate collapsible */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a.jl_magic_tabs_self_contained_starter_active:after {
   content:"\f07c" !important; 
}
</style>

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.

Last updated: 4 months ago