Thursday, August 2, 2018
In this tutorial we will add icons to your navbar. In the previous tutorial we added a responsive layout with bootstrap. In this post we will add some icons to your navigation. Font-Awesome gives you professional looking vector graphics, which are implemented using CSS. Bootstrap 4 uses Font-Awesome as it's icons. Glyphaicons will goes away. So we might as start using it.
Just to review this is how our layout looks like in our previous post.
We are going to add font-awesome icons to the first level of the navigation links. You can decide what icons goes into the products drop down menu.
Here are the steps to add font-awesome to our project:
1. Open the NorthwindCafe.Web project and add the font-awesome library by launching the Nuget Package manager by right-clicking on the "References" node and select "Manage NuGet Packages".
2. Once the Nuget Package manager is opened make sure the "Browse" tab is selected, then type "font-awesome" in the search box. Select the result that says "Font Awesome for Twitter Bootstrap"
3. Click the "Install" button, click "OK" in the "Preview Changes" dialog
4. We are ready to add some icons to your navbars now. Font-awesome is really easy to use first we need reference the font-awesome.css file. We could create a new Bundle Config for the font-awesome, but it is much easier to it in in our _Layout.cshtml file so that we can use it through out the site. Add the following line to between the <head> section of the layout page.
Your head markup should look like the following
5. Navigate to the font-awesome icons page to see which icons you want to use at http://fontawesome.io/icons/
6. For the "Home" icon we will use the "home" icon in font-awesome
7. If you click on the text link or the icon itself you will see the code to implement the icon in your website
To add a font-awesome to your website you just need the <i> tag with the class being the font-awesome class name for the icon that you want. Since the home icon has a class name of "fa-home", the markup is <i class="fa-home"></i>, the aria-hidden="true" is for assistance accessibility technology to ignore it. So that it does not announce the the icon to the world, since it's purpose is only for decoration and has no other meaning.
8. To add the home icon to the NorthwindCafe.Web project, open the _Layout.cshtml page. Then next to the home navigation link add the icon with the following code.
The navigation should now look like this
9. I have choose the fa-coffee for "About", fa-envelope for "Contact" and fa-product-hunt for "Products"
The navigation should look like this in desktop mode
And look like the following in mobile mode:
Your final markup should look like the following:
Similar Posts:
Just to review this is how our layout looks like in our previous post.
We are going to add font-awesome icons to the first level of the navigation links. You can decide what icons goes into the products drop down menu.
Here are the steps to add font-awesome to our project:
1. Open the NorthwindCafe.Web project and add the font-awesome library by launching the Nuget Package manager by right-clicking on the "References" node and select "Manage NuGet Packages".
2. Once the Nuget Package manager is opened make sure the "Browse" tab is selected, then type "font-awesome" in the search box. Select the result that says "Font Awesome for Twitter Bootstrap"
3. Click the "Install" button, click "OK" in the "Preview Changes" dialog
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
Your head markup should look like the following
<head>
<title>@Page.Title</title>
@RenderSection("head", required: false)
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
@Styles.Render("~/Content/bootstrap")
@Styles.Render("~/Content/css")
</head>
5. Navigate to the font-awesome icons page to see which icons you want to use at http://fontawesome.io/icons/
6. For the "Home" icon we will use the "home" icon in font-awesome
7. If you click on the text link or the icon itself you will see the code to implement the icon in your website
8. To add the home icon to the NorthwindCafe.Web project, open the _Layout.cshtml page. Then next to the home navigation link add the icon with the following code.
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-home"> Home</i><span class="sr-only">(current)</span></a>
</li>
The navigation should now look like this
9. I have choose the fa-coffee for "About", fa-envelope for "Contact" and fa-product-hunt for "Products"
The navigation should look like this in desktop mode
And look like the following in mobile mode:
Your final markup should look like the following:
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
@RenderSection("head", required: false)
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
@Styles.Render("~/Content/bootstrap")
@Styles.Render("~/Content/css")
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto font-weight-bold">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-home"> Home</i><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-coffee"> About</i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-envelope"> Contact</i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-product-hunt">
Products
</i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Beverages</a>
<a class="dropdown-item" href="#">Condiments</a>
<a class="dropdown-item" href="#">Confections</a>
<a class="dropdown-item" href="#">Dairy Products</a>
<a class="dropdown-item" href="#">Grains/Cereals</a>
<a class="dropdown-item" href="#">Meat/Poultry</a>
<a class="dropdown-item" href="#">Produce</a>
<a class="dropdown-item" href="#">Seafood</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>Northwind Store</h2>
</div>
</header>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
</body>
</html>
Similar Posts:
- ASP.NET MVC Empty Project : Adding BundleConfig From Scratch
- ASP.NET MVC : Configure The BundleConfig Class To Use CDN
- ASP.NET MVC : Create A Responsive Layout With Bootstrap
- End-to-End ASP.NET MVC: Create A Responsive Layout With Bootstrap
Subscribe to:
Post Comments (Atom)
Đặt vé máy bay tại Aivivu, tham khảo
ReplyDeletevé máy bay đi Mỹ
về việt nam từ mỹ
vé máy bay từ canada về việt nam
khi nào có máy bay từ nhật về việt nam
gia ve may bay tu han quoc ve viet nam
Vé máy bay từ Đài Loan về Việt Nam
chi phí vé máy bay cho chuyên gia nước ngoài
Good post but I was wondering if you could write a litte more on this subject? I’d be very thankful if you could elaborate a little bit further. Appreciate it! Car Accessories
ReplyDeleteCars are essential for daily life, but mistakes like a wrong fuel drain can cause serious damage. When the wrong type of fuel is drained or refilled, it can lead to engine problems, costly repairs, and breakdowns. It's important to ensure the correct fuel type is used to maintain performance and avoid damage. Regular maintenance and careful fueling habits protect your car from harm. Always double-check before filling up or draining fuel to keep your car running smoothly and safely.
ReplyDeleteMicropayment cashing is the process of converting small online credit or payment amounts into usable cash. It’s commonly used in digital content services or mobile payments. Users may face issues with unpaid micropayments, leading them to search for solutions. One popular query in Korea is 미납 소액결제 방법 which refers to how to resolve unpaid micropayment issues. Understanding the proper steps can help users manage their balances effectively and avoid service interruptions or penalties.
ReplyDelete