Add font awesome in EJ2 JavaScript Toolbar control

20 Dec 20243 minutes to read

You can customize the Toolbar component items by using third-party icons other than the icons available in the Syncfusion library. In the following example, font awesome icons are used as toolbar items.

  • Refer to the third-party reference link. Here, the CDN link of Font Awesome is used.
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

The following sample explains how to use font awesome in the toolbar component.

ej.base.enableRipple(true);

//Initialize Toolbar component

var toolbar = new ej.navigations.Toolbar({
width:600,
items: [
        { prefixIcon: "fa fa-twitter" },
        { prefixIcon: "fa fa-facebook" },
        { prefixIcon: "fa fa-whatsapp" },
        { template: '<button class="e-btn e-tbar-btn"><span style="font-size: 3em; color: Tomato;"><i class="e-icons fa fa-twitter"></i</span></button>' }
       ]
});

//Render initialized Toolbar component
toolbar.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toolbar</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="https://cdn.syncfusion.com/ej2/29.1.33/material.css" rel="stylesheet">
    <!-- <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" /> -->
    
    <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/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

We can also use templates for rendering icons based on the requirements.

Customization

The class e-icons is used for standardizing the appearance of the icons to fit into toolbar items. If you wish to override the appearance of the icons used, you can do so by using the following set of classes.

Use the following CSS to set the color of icons.

    .e-toolbar .e-icons {
        color: #e3165b !important;
    }

Use the following CSS to set the font size of icons.

    .e-toolbar .e-btn .e-icons.e-btn-icon {
        font-size: 14px !important;
    }