我正在 Microsoft Visual Studio 2022 中創建 Blazor WebAssembly 網站，但在導航選單上顯示引導圖示時遇到了一些問題。我通過 npm 安裝了圖示，并將引導檔案夾復制到專案查看器中的 wwwroot 中。
我的導航選單項代碼如下所示：
<div class="nav-item px-3">
<NavLink class="nav-link" href="Spotify">
<span class="bi bi-spotify" aria-hidden="true"></span> Spotify
</NavLink>
</div>
span 類的默認設定是span ，它運行良好并且顯示了該圖示，但是當我使用上面的新 span 類代碼運行程式時，該圖示不會顯示在文本旁邊或任何地方。
uj5u.com熱心網友回復：
您只需要從 bootstrap repo復制 bootstrap-icons.svg 。將其放在檔案夾中的wwwroot檔案夾中。
例如創建emoji-smile-fill使用。
<svg class="bi" width="24" height="24" fill="currentColor" >
<use href="{folder-to-resource}/bootstrap-icons.svg#emoji-smile-fill"></use>
</svg>
uj5u.com熱心網友回復：
在新專案中，wwwroor\css 檔案夾包含 app.css 檔案。
- 用引導程式的 cdn 地址替換那里的第一行：
/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
- 然后在 NavMenu.razor 替換
"oi oi-home"為"oi bi-house"
就這些。
您當然可以在 NavMenu.razor.css 中重命名為 make 它.oi{ }，只是為了外觀。.bi{ }"bi bi-house"
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/484616.html
標籤：C＃ 视觉工作室 西装外套 blazor-webassembly 视觉工作室 2022
下一篇：我想顯示只出現一次的矩陣元素