Hello - What would need to be done to use a regular png image as an icon in the main navigation menu? I am change icons around using Glyphicons, for example, but if I have a fairly extensive set of icons specific to our application that are in png format that I would like to use. It did not seem to work to specify the image path. I went down the road of creating a css class with the image data base64 encoded in it, and that did show the image but it is not being sized correctly so the proportions are off and/or part of the icon is cutoff in the menu.
3 Answer(s)
-
0
Hi @joshhulbert,
Sorry for the late response. Which template do you use ? Angular1, Angular2, MVC 5.x with jQuery or ASP.NET Core with jQuery.
We use css class values for icon property of MenuItemDefinition which is defined in [*NavigationProvider] class in your project. So, you can set a png file name for icon property of MenuItems and then you can use img tag insted of <i class=""></i> tags.
You might need to play with css of menu a bit.
If you can share the tamplate you use, I can point you to specific files.
Thanks.
-
0
Ah ok thank you. I am using the MVC 5.x with jQuery template. I'll poke around and see if i can find that, but if you could point to specifics for that template it would be helpful. Thanks!
-
0
Hi,
This is the file <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/dev/src/MyCompanyName.AbpZeroTemplate.Web/Areas/Mpa/Views/Layout/_Sidebar.cshtml">https://github.com/aspnetzero/aspnet-ze ... bar.cshtml</a>.
You need to replace
<i class="@menuItem.Icon"></i>with an image tag.
Thanks.
