Search results

Add font awesome icons in JavaScript (ES5) Accordion control

22 Jul 2021 / 2 minutes to read

We can customize the Accordion component items by using font awesome icons.

  • Need to add font awesome CDN reference link in your sample to use font awesome icons.
Copied to clipboard
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  

You can add the font awesome icons to the Accordion header using ‘iconCss’ property. The following sample illustrates how to use font awesome in Accordion component.

Source
Preview
index.js
index.html
Copied to clipboard
ej.base.enableRipple(true);

//Initialize Accordion component

var accordion = new ej.navigations.Accordion({
items: [
      { header: 'Twitter', expanded: 'true',  iconCss: 'fa fa-twitter', content: 'Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".' },
      { header: 'Facebook',  iconCss: 'fa fa-facebook', content: 'Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates.' },
      { header: 'WhatsApp', iconCss: 'fa fa-whatsapp',  content: 'WhatsApp is an American freeware, cross-platform messaging and Voice over IP (VoIP) service owned by Facebook, Inc.' },
    ]
});

//Render initialized Accordion component
accordion.appendTo('#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Customization

Use following CSS to customize the accordion items header icons.

Copied to clipboard
.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
     display: inline-block;
     padding: 0 10px 0 0 !important;
}

Use following CSS to customize the selected accordion item content icons.

Copied to clipboard
.e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-content-icon {
color: rgba(0, 0, 0, 0.54) !important;
}