Thursday, August 1, 2019
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.
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 to the bower.json file
Add the following line to the bower.json file
"font-awesome": "^5.9.0"
the complete bower.json markup should look like following
Save the bower.json file and Visual Studio will bring in the font-awesome library automatically.
2. Now you should see the font-awesome library in your wwwroot file
3. 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 will put the file 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.
<link href="~/lib/font-awesome/css/fontawesome.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/brands.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/solid.css" rel="stylesheet" />
Your head markup should look like the following
4. Navigate to the font-awesome icons page to see which icons you want to use at http://fontawesome.io/icons/
5. For the "Home" icon we will use the "home" icon in font-awesome
6. 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.
7. 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.
Home
The navigation should now look like this
8. 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:
github Repository: https://github.com/techjunkiejh/NorthwindCafe/tree/Hour8
Just to review this is how our layout looks like in our previous post.
Here are the steps to add font-awesome to our project:
1. Open the NorthwindCafe.Web project and add the font-awesome library to the bower.json file
"font-awesome": "^5.9.0"
the complete bower.json markup should look like following
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "^4.3.1",
"Jquery": "^3.4.1",
"font-awesome": "^5.9.0"
}
}
Save the bower.json file and Visual Studio will bring in the font-awesome library automatically.
2. Now you should see the font-awesome library in your wwwroot file
3. 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 will put the file 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.
<link href="~/lib/font-awesome/css/fontawesome.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/brands.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/solid.css" rel="stylesheet" />
Your head markup should look like the following
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/lib/font-awesome/css/fontawesome.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/brands.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/solid.css" rel="stylesheet" />
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/Styles.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
@RenderSection("head", required: false)
</head>
4. Navigate to the font-awesome icons page to see which icons you want to use at http://fontawesome.io/icons/
5. For the "Home" icon we will use the "home" icon in font-awesome
6. If you click on the text link or the icon itself you will see the code to implement the icon in your website
7. 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
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>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/lib/font-awesome/css/fontawesome.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/brands.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/solid.css" rel="stylesheet" />
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/Styles.css" rel="stylesheet" />
<script src="~/lib/Jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
@RenderSection("head", required: false)
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-coffee"></i> About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-envelope"></i> Contact</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="fab fa-product-hunt"></i> Products
</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>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>Northwind Store</h2>
</div>
</header>
@RenderBody()
</body>
</html>
github Repository: https://github.com/techjunkiejh/NorthwindCafe/tree/Hour8
Subscribe to:
Post Comments (Atom)
great
ReplyDeleteThanks for sharing this informative content.,
ReplyDeleteLeanpitch provides online training in Scrum Master Certifiation during this lockdown period everyone can use it wisely.
Join Leanpitch 2 Days CSM Certification Workshop in different cities.
Scrum master certification online
CSM certification online
Aivivu chuyên vé máy bay, tham khảo
ReplyDeletevé máy bay đi Mỹ giá bao nhiêu
đăng ký bay từ mỹ về việt nam
ve may bay tu canada ve viet nam
cách đặt vé máy bay từ nhật về việt nam
Lịch bay từ Seoul đến Hà Nội
Vé máy bay từ Đài Loan về Việt Nam
chuyen bay danh cho chuyen gia