Help getting icons to work correctly

[dan]

I am having the hardest time getting icons to work in some of your controls, in this case the navigationDrawer. I am using aurelia-cli.

I have copied the example from your documentation https://help.syncfusion.com/js/navigationdrawer/getting-started.  I have also modified the class data-ej-imageclass to be e-icon e-profile even though in the documentation it is just icon-profile but it still does not work.

Attached is my project the navigationDrawer is located in src/components/my-drawer

To run:

npm install

au run

Attachment: client_a0d3cb3c.7z

[Selvamani Sankarappan]

Hi Dan, 

Thanks for contacting Syncfusion support. 

We did not add those icons in widgets.core.min.css file. So, that icons are not referred. You need to refer that icons manually in your CSS file and customize classes based on your application. Refer to the following code example: 

 

[style] 

<style> 

    @font-face { 

        font-family: 'ej-xlfont'; 

        src: url('../../common-images/tools/icons.eot'); 

        src: url('../../common-images/tools/icons.eot') format('embedded-opentype'), url('../../common-images/tools/icons.woff') format('woff'),url('../../common-images/tools/icons.woff') format('woff'), url('../../common-images/tools/icons.ttf') format('truetype'), url('../../common-images/tools/icons.svg') format('svg'); 

        font-weight: normal; 

        font-style: normal; 

    } 

 

    .e-home:before { 

        font-family: "ej-xlfont"; 

        content: "\e900"; 

    } 

 

    .e-profile:before { 

        font-family: "ej-xlfont"; 

        content: "\e901"; 

    } 

 

    .e-people:before { 

        font-family: "ej-xlfont"; 

        content: "\e902"; 

    } 

 

    .e-photos:before { 

        font-family: "ej-xlfont"; 

        content: "\e903"; 

    } 

 

    .e-communities:before { 

        font-family: "ej-xlfont"; 

        content: "\e904"; 

    } 

 

    .e-location:before { 

        font-family: "ej-xlfont"; 

        content: "\e905"; 

    } 

 

    .e-home, .e-profile, .e-people, .e-photos, .e-communities, .e-location { 

        font-size: 24px; 

        color: black; 

    } 

</style> 

 

We have modified your sample. Refer to the following sample: 

http://www.syncfusion.com/downloads/support/forum/132697/ze/img-273510577 

Please let us know if you need any further assistance. 

Regards, 

Selvamani S.