Category / Section
How to use font awesome icon in ej controls
2 mins read
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 <html>),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 <img>. 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>
