When you first make a Blazor project, the default icon provider is Iconify, with their open icon pack.
How can I change the icon provider?
Most sites provide some JavaScript to include in an html page, which I don't use since I'm using a Blazor page.
What do I need to do to switch my provider over?
The icons are comming from #import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); from site.css
Import different icons
I have used Material Icons
1.Imported material icon in site.css
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
2.Use the Material Icons
Example:
<div class="#NavMenuCssClass" #onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<i class="material-icons">
accessibility
</i> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<i class="material-icons">autorenew</i>
Counter
</NavLink>
</li>
</ul>
</div>
What worked for is to put the following link on the head tag, then I was able to get the icons
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
then access the icons like so
<i class="material-icons">face</i>
For more info check this document
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<i class="fa-solid fa-cog fa-spin me-3" aria-hidden="true"></i> Setting
font-awesome
https://cdnjs.com/libraries/font-awesome
Related
I'm trying to implement a dropdown menu inside the navigation bar which should show up on user click and disappear on clicking anywhere outside on the ecommerce app I'm making, but the dropdown function is not working as intended.
_layout.cshtml
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-controller="Movies" asp-action="Index">eMovies</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i> Movies</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i> Management
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"><i class="bi bi-camera-reels"></i> Cinemas</a>
<a class="dropdown-item" asp-controller="Producers" asp-action="Index"><i class="bi bi-headset"></i> Producers</a>
<a class="dropdown-item" asp-controller="Actors" asp-action="Index"><i class="bi bi-person-square"></i> Actors</a>
</div>
</li>
</ul>
<!-- etc -->
</div>
</div>
</nav>
</header>
Here's my github repository for the project for reference, to get to code above go from eMovies/Views/Shared/_layout.cshtml
https://github.com/johnvillasenor/ecommerce-aspnet-mvc-app
Help is much appreciated :)
Have to reference bootsrap correctly and make sure you're using the latest version of bootsrap css and js.
Latest compiled CSS and javascript(boostrap 5.2 should work as well):
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
I have used Bootstrap 4.6 successfully and wanted to move to Bootstrap 5. I am trying and testing very basic functionality, keeping packages managed through NuGet.
The problem I am experiencing is that I do not get intellisense for some of the BS 5 collapse attributes. However, if I copy directly from the Bootstrap examples it seems to work as expected. It's almost like I'm missing a file reference of something, but nothing that breaks the functionality - only the intellisense.
For simplicity and testing, this is what I have done:
Create ASP.NET MVC 5 project in Visual Studio 2019 (framework 4.7.2)
Used NuGet package manager to update Bootstrap, jQuery to latest versions. BS=5.1.3, jq=3.6.0
Modified BundleConfig.cs accordingly:
//bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"))
bundles.Add(new Bundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"))
Replaced the relevant part of the <body> section from _Layout.cshtml (from default) to the following (copied from https://getbootstrap.com/docs/5.1/components/navbar/):
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</div>
Ran the project. The navbar seems to work just as the example from bootstrap. However, note the 6th line containing data-bs-toggle="collapse" and data-bs-target="#navbarSupportedContent". If I re-create the code manually, intellisense does not recognize data-bs-toggle or data-bs-toggle or data-bs.
What am I missing?
I have an ASP.NET webforms project with a master page using adminlte UI.
I created a web site with default project in Visual Studio and then change the project to apply adminlte dashboard, copied all scripts and bootstrap then change master page and default form.
My problem: in menu sidebar when I tried to add from to root folder and do this
<li>
<a runat="server" href="Shipment.aspx">
<i class="fa fa-th"></i><span>Shipment</span>
</a>
</li>
everything is ok and form loads without any problem.
But when I created a folder Track and created a new form inside it and try to do this
<li>
<a runat="server" href="~/Track/Shipment.aspx">
<i class="fa fa-th"></i><span>Shipment</span>
</a>
</li>
I get this exception:
exception
What I tried
First attempt:
<li>
<a runat="server" href="../../Shipment.aspx">
<i class="fa fa-th"></i><span>Shipment</span>
</a>
</li>
Second attempt:
<li>
<a runat="server" href="../Track/Shipment.aspx">
<i class="fa fa-th"></i><span>Shipment</span>
</a>
</li>
Third attempt:
<li>
<a runat="server" href="~/../Shipment.aspx">
<i class="fa fa-th"></i><span>Shipment</span>
</a>
</li>
Final attempt:
<li>
<a runat="server" href=~/Track/Shipment.aspx">
<i class="fa fa-th"></i><span>Shipment</span>
</a>
</li>
I've fixed some deprecated and superfluous markup - adjust any related CSS selectors.
Try this:
<li>
<a runat="server" href="~/Shipment.aspx">
<em class="fa fa-th">Shipment</em>
</a>
</li>
The "~/" should resolve anything from the main project root down, presuming there are no page name conflicts. Some of your attempts should have worked so I'm thinking maybe something else is causing a problem. Presuming your menu is in a User Control, maybe it's the path to this control in your Master Page(s) that is causing the problem?
I am new ASP.NET WebForms developer and I am using ASP.NET 4.5. I am struggling right now with developing the menu. I am using Bootstrap as the main style for the UI of my application. Also, I would like to keep using the normal HTML ul tags for developing this menu. However, I am struggling now with configuring the links in this menu.
The website navigation is as follows:
Home
About
Contact
Admin > Service Management
> User Managment
The first three pages; home, about and contact are under the same folder called Pages. Under Pages folder, there is another folder called Admin. This folder includes ServiceManagement and UserManagement pages. The problem which I am struggling with is that when the user is browsing ServiceManagement or UserManagement and he clicks on the link to Home page from the top menubar, he will got an error and the link will look like the following:
http://localhost:61090/Pages/Pages/About.aspx
Here's the code of the Menu:
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="../Assets/images/logo.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown mega-dropdown">
Admin <span class="fa fa-angle-down"></span>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="">
Service Management</li>
<li class="">User Management</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
So how can I resolve this issue?
Change your HTML markup from:
About
To
<asp:HyperLink ID="lnkAbout" runat="server" Text="About" NavigateUrl="~/Pages/About.aspx"></asp:HyperLink>
The key point to take from this, is that the NavigateUrl property uses a path relative to the root of your web application ~/. This makes it simple to reference pages/content from your ASPX pages etc.
HTML based approach
You could try to set the following in your Admin HTML files.
<HEAD>
<!-- Removed for brevity -->
<BASE href="http://yourURL/Pages/Admin">
<!-- Removed for brevity -->
</HEAD>
I am not 100% certain on this one so you will need to try it on your own (in the ServiceManagement and UserManagement pages only).
Place the attribute runat="server" inside the <a> tag.
For your href value, start with "~/" to identify the application root. See ASP.NET Web Site Paths.
e.g. <a runat="server" href="~/Pages/About.aspx">About</a>
You can also use the same format to link your image file:
e.g. <img runat="server" src="~/Assets/images/logo.png" alt="">
I want to build a Bootstrap styled dropdown and #HTML.Helper. I know there is a Bootstrap.MVC package, but we don´t wanna go into non standard packages.
We first tried the following:
#Html.DropDownListFor(model => model.idSelectedEnterprise, Model.Enterprises, new { #class = "dropdown" })
But this didn´t gave us a real bootstrap style. On the other hand, if we use a normal bootstrap code like from the bootstrap documentation:
<div class="dropdown">
<button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
We don´t know how to plug in the #Model helper that will return the current selected item from dropdown.
This may sound basic, but we need help.
Not sure why the insistence on "non-standard packages" - Bootstrap is built (and intended) to be extended as the community requires.
What you are looking for has a few different options; I prefer Bootstrap Select: http://silviomoreto.github.io/bootstrap-select/.
It also has a NuGet package: https://www.nuget.org/packages/bootstrap-select
It's simple to setup:
Create your <select> with the .selectpicker class.
#Html.DropDownListFor(m => m.Foo, Model.Foos, htmlAttributes: new { #class="selectpicker" })
Then call:
$('.selectpicker').selectpicker();