We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use font awesome icon in ej controls

Platform: JavaScript |
Control: General |
Published Date: September 20, 2017 |
Last Revised Date: May 8, 2019
Tags: javascript

This knowledge base explains how to use the font awesome icons in Syncfusion EJ controls.

What is Font Awesome?

Font Awesome is a font and icon toolkit based on CSS and LESS. You can use the font awesome icons in to your sample by referring the font awesome library in header section.

How to use Font Awesome in Syncfusion ej controls?

You can place Font Awesome icons by using the prefix `fa` and the icon's name in to your sample.

[HTML]

 

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Essential Studio for JavaScript : Menu - context menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"  />
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/15.3.0.26/js/web/office-365/ej.web.all.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="15.3.0.26/themes/web/content/default.css" rel="stylesheet" />
    <link href="15.3.0.26/themes/web/content/default-responsive.css" rel="stylesheet"/>
    <script src="//cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js" type="text/javascript"> </script> 
    <script src="//cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="//cdn.syncfusion.com/15.3.0.26/js/web/ej.web.all.min.js "></script>
</head>
<body>
    <div class="content-container-fluid">      
        <div class="row">                
            <div class="cols-sample-area">                                  
          <div id="target" class="textarea">
                    HTML is written in the form of HTML elements consisting of   tags enclosed in angle brackets (like &lt;html&gt;),within the web page content. HTML tags most commonly come in pairs like and ,although some tags, known as empty elements, are unpaired, for example &lt;img&gt;. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
                </div>
                <ul id="contextMenu">
                     <li><a>Cut <span class = "fa fa-cut"></span></a></li> 
                     <li><a>Comments <span class = "fa fa-comment"></span></a></li>
                     <li><a>Links<span class = "fa fa-link"></span></a></li>
                </ul>           
            </div>
        </div>
    </div>
</body>
</html>

 

[JS]

 

<script type="text/javascript">
    jQuery(function ($) {
        $("#contextMenu").ejMenu({
      menuType: ej.MenuType.ContextMenu,
      openOnClick: false,
      contextMenuTarget: "#target"
  });
    });
</script>

 

[CSS]

 

<style type="text/css">
     .textarea {
         border: 1px solid;
         padding: 10px;
         position: relative;
         text-align: justify;
         width: 463px;
         color:gray;
         margin: 0 auto;
     } 
</style>

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon