Base solution for your next web application
Open Closed

Add an icon to the ABP ng-2 version #2290


User avatar
0
sampath created

Hi,

Can you tell me how to add an icon to the ng-2 version app ?

I have tried this.But it's not working.It is working fine for the already existing icons such as "icon-home". Can you tell me how to do that ? Thanks.

new SideBarMenuItem("Dashboard", "Pages.Tenant.Dashboard", "check-circle-o", "/dashboard"),

I got icons from here : [http://keenthemes.com/preview/metronic/theme/admin_4_material_design/ui_icons.html])


4 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    Hi,

    Please check font awesome document: <a class="postlink" href="http://fontawesome.io/icon/check-circle-o/">http://fontawesome.io/icon/check-circle-o/</a> You misused class name. It should be "fa fa-check-circle-o" instead of "check-circle-o".

    BTW, we used Simple Line Icons in this page: <a class="postlink" href="http://keenthemes.com/preview/metronic/theme/admin_4_material_design/ui_icons.html">http://keenthemes.com/preview/metronic/ ... icons.html</a> for current menu icons.

  • User Avatar
    0
    sampath created

    Hi,

    Yes,me too used the link which you have mentioned on the "developing an application step by step" doc.On that link first tab is "fontawsome icons" tab.I have tried to use that classes directly and didn't work.Anyway I have used it as you mentioned and now it is working.Thanks a lot :)

  • User Avatar
    0
    justinp created

    I ran into this same issue, but the instructions don't seem clear for using Simple Line Icons.

    hikalkan mentions above that they are using the Simple Line Icons. In the default menu, "icon-globe" is used. Replacing with "icon-user" works, but replacing it with "icon-user**<ins>s</ins>**" does not work. <ins>So how do I get this to work?</ins>

    By the way, if I did want to use Font Awesome, I use the syntax above in the new SideBarMenuItem (e.g. "fa fa-users"), and this works, so thank you for those instructions, but some instructions on the Simple Line Icons would be appreciated.

    EDIT: I did find that the icon I was trying to use is listed as "icon-users" on the Metronic site, but when I looked at what Abp was using, it was "icon-people." I'm not sure where the proper names are located, but be aware that they do not match the Metronic site.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    As I can see, simple line icons does not contain ".icon-users" but it contains ".icon-people" instead. In angular2 version we used simple line icons from npm, see <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/package.json#L66">https://github.com/aspnetzero/aspnet-ze ... e.json#L66</a>.

    Probably metronic didn't update it to latest version. You can check the latest icons here <a class="postlink" href="http://simplelineicons.com/">http://simplelineicons.com/</a>.

    Thanks.