Question 332131 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I use additional icons in NavMenu in Blazor 8?

I want to use additional icons in the NavMenu.razor in my Blazor 8 application. In Blazor 7 there was a iconset configured in wwwroot/css/, and so I was able to use additional icons only with naming it in the NavMenu.razor. But the whole css folder is missed in the Blazor 8 template. There are only three icons configured in the NavMenu.razor.css, but I don’t know how to add additional icons there.
I’m not a css expert (really not :-() and I don’t know how to solve this problem without my (missing) css knowledge. Is it possible to get new icons likely easily like in Blazor 7?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to the comment of Kurt I found a solution. I do not use the standard icons anymore, but the icons from a linked library, Blazorise.Icons.FontAwesome (https://blazorise.com/docs/extensions/icons) in my case. This way I changed a nav point in NavMenu.razor:

    <NavLink class="nav-link" href="counter">
    <Icon Name="IconName.Add" IconSize="IconSize.Large" />  @* new *@
    <span style="margin-right:0.8em;"></span> Counter  @* new *@
    @*<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter *@   @* old *@
</NavLink>

    All possible icons are found even in the documentation.

    I don't know how to use some more standard icons like the three from the template (that's why this response should not be the correct answer), but with an another library I can use more icons like demanded.


  2. 0

    Yes, that is possible.
    But be aware that this might increase your user’s download considerably.

    1. In App.razor, add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

    2. In NavMenu.razor, remove (3x) the -nav-menu tail fom the icon names (ie, just bi-house-door-fill)

    3. in NavMenu.razor.css, remove the 3 old incons.

    4. in NavMenu.razor.css, in the .bi class, set top: -0.75rem;

    That last one is a quick fix for aligning the icons, you may want to fine-tune that class a little better.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search