Add font awesome in EJ2 JavaScript Accordion control

2 May 20233 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.

<link rel="stylesheet" href="" />

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.


//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
<!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="" rel="stylesheet">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
<script src="" type="text/javascript"></script>
<script src="" type ="text/javascript"></script>

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

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


Use following CSS to customize the accordion items header icons.

.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.

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