1,673 questions
NavMenu not show icons
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(38.4, 91%, 13%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3E9%3C/text%3E%3C/svg%3E)
929Free
641
Reputation points
I create Blazor WebAssembly project in vs 2019. but , None of the icons on the menu are displayed. Who can help me , thanks .
Developer technologies .NET Blazor
{count} votes
-
Michael Washington 921 Reputation points MVP2022-02-06T21:45:57.213+00:00 If you hit F12 in your web browser (to go to Developer tools), and click on the Network Tab, then refresh the page, does it show any of the entries in Red?
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(128, 8%, 22%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EA%3C/text%3E%3C/svg%3E)
Anonymous2022-02-07T01:40:16.353+00:00 Hi @929Free ,
By default, when we create a new Blazor WebAssembly project, the icons should be displayed, Because, the default template already add the bootstrap and open iconic bootstrap reference to render the icons.
Have you ever changes the code your project? Can you tell the details steps what you do to reproduce the problem? Or you can post the relates code about the Index.html page and the app.css file (in the
wwwrootfolder) content, so that we can try to reproduce the problem.Best regards,
Dillion -
929Free 641 Reputation points
2022-02-07T06:47:40.093+00:00 app.css:
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}a, .btn-link {
color: #0366d6;
}.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}.content {
padding-top: 1.1rem;
}.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}.invalid {
outline: 1px solid red;
}.validation-message {
color: red;
}blazor-error-ui {
background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } -
929Free 641 Reputation points
2022-02-07T06:55:03.59+00:00 I haven't changed the code...
-
Anonymous
2022-02-07T09:11:11.98+00:00 Hi @929Free ,
Based on your description, I create a new Blazor WebAssembly application using VS 2019, the menu icons are displayed like this:
If using F12 developer tools to check the Network or in the Console panel, is there any error?
In my sample, in the Network panel, the resource load success, and there is no error in the console panel:
and in the NavMenu.razor component it add the icon class:
Best regards,
Dillion -
929Free 641 Reputation points
2022-02-08T10:28:00.827+00:00 thanks, I generated it successfully on win10 and vs 2022, I speculate that it may be the problem of win7 system.
Sign in to comment
Sign in to answer