Ext.js - Font-Awesome Normal Theme

When we are using any theme which is not the Triton theme, then we need ot add fontawesome stylesheet explicitly in our project.

Syntax

Add CDN file for font-awesome style in your html page.

<link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel = "stylesheet" />

Now add the class as −

iconCls : 'fa fa-car'

Example

Following is a simple example to add font-awesome class.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
      rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" 
         rel = "stylesheet" />
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.container.Container', {
               renderTo : Ext.getBody(),
               layout : 'auto' ,
               width : 600,
               
               items : [{
                  xtype	: 'button',
                  iconCls	: 'fa fa-car',
                  text	: 'Browse Fil1e'
               },{
                  xtype	: 'button',
                  iconCls	: 'fa fa-file',
                  text	: 'Browse File3'
               },{
                  xtype	: 'button',
                  iconCls	: 'fa fa-home',
                  text	: 'Browse File4'
               },{
                  xtype	: 'button',
                  iconCls	: 'fa fa-folder',
                  text	: 'Browse File5'
               }]
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "panel" > </div>
   </body>
</html>

The above program will produce the following result −

extjs_fonts.htm