NavMenu not show icons

Question

NavMenu not show icons

929Free 281

I create Blazor WebAssembly project in vs 2019. but , None of the icons on the menu are displayed. Who can help me , thanks .

Michael Washington 791 Reputation points MVP

2022-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?
Zhi Lv - MSFT 21,716 Reputation points Microsoft Vendor

2022-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 wwwroot folder) content, so that we can try to reproduce the problem.

Best regards,
Dillion
929Free 281 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 281 Reputation points

2022-02-07T06:55:03.59+00:00

I haven't changed the code...
Zhi Lv - MSFT 21,716 Reputation points Microsoft Vendor

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 281 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.

Michael Washington 791 Reputation points MVP

2022-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?
Zhi Lv - MSFT 21,716 Reputation points Microsoft Vendor

2022-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 wwwroot folder) content, so that we can try to reproduce the problem.

Best regards,
Dillion
929Free 281 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 281 Reputation points

2022-02-07T06:55:03.59+00:00

I haven't changed the code...
Zhi Lv - MSFT 21,716 Reputation points Microsoft Vendor

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 281 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.

NavMenu not show icons

blazor-error-ui {

Activity