1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. e-icons in asp.net core razor cshtml

e-icons in asp.net core razor cshtml

Following example from:
Im trying to create the same menu buttons decorated with e-icons,
i have copied this project and it works however non of e-icons shows.

Do I always have to add style for each icon in html like below?:
.e-icons {
    font-family: "e-icons" !important;
}

. e-schedule-day-view::before {
    content: '\e72c';
}
<e-toolbar-item prefixIcon="e-icons e-schedule-day-view" tooltipText="Day" text="Day"></e-toolbar-item>

If it matters i have a project with bootstrap4 lib

1 Reply 1 reply marked as answer
SK Satheesh Kumar Balasubramanian Syncfusion Team June 15, 2021 12:00 PM UTC

Hi Mateusz, 
  
Thanks for using Syncfusion Products. 
  
We have validated your reported query "e-icons in asp.net core razor cshtml" and suspect that you need to use our icons from e-icons library, custom icons and other icons like font awesome. We have prepared a sample to achieve your requirement which can be downloaded from the following link. 
  
  
  
_Layout.cshtml: 
   <environment include="Development"> 
        <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.css" /> 
        <link rel="stylesheet" rel='nofollow' href="~/css/site.css" /> 
        @* Syncfusion Essential JS 2 Styles *@ 
        <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/bootstrap4.css" /> 
        <link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
        <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/custom-icons.css" rel="stylesheet" /> 
    </environment> 
<body class="e-view bootstrap4"> 
........ 
</body> 
  
Index.cshtml: 
                   <ejs-toolbar id="toolbar_options" height="70px" overflowMode="Scrollable" scrollStep="100" created="onToolbarCreated" clicked="onToolbarItemClick"> 
                        <e-toolbar-items> 
                            <e-toolbar-item prefixIcon="fa fa-camera fa-stack-4x" tooltipText="Camera" text="Camera"></e-toolbar-item> 
                            <e-toolbar-item prefixIcon="e-icons e-schedule-filter-none" tooltipText="Filter" text="Filter"></e-toolbar-item> 
                            <e-toolbar-item prefixIcon="e-icons e-schedule-ordered-list" tooltipText="Ordered List" text="Ordered List"></e-toolbar-item> 
                            <e-toolbar-item prefixIcon="e-icons e-schedule-add-event" tooltipText="New Event" text="New Event"></e-toolbar-item> 
                       ............................................................... 
                        </e-toolbar-items> 
                    </ejs-toolbar> 
  
<style> 
    .bootstrap4 .e-schedule-ordered-list::before { 
        content: "\e72c"; 
    } 
  
    span.e-btn-icon.fa.fa-camera.fa-stack-4x.e-icons { 
        font-size: 18px; 
        color: black; 
    } 
  
    .bootstrap4 .e-schedule-filter-none::before { 
        content: '\e819'; 
    } 
</style> 
  
 
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 


Marked as answer
Loader.
Up arrow icon