Monday, August 1, 2016
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 will use Font-Awesome as it's icons starting version 4.0 and beyond. Glyphaicons will go away. So we might as start using it, in anticipation of Bootstrap 4.0.
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": "~4.6.3"
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/font-awesome.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.
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
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:
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": "~4.6.3"
the complete bower.json markup should look like following
{ "name": "asp.net", "private": true, "dependencies": { "bootstrap": "3.3.6", "angular": "~1.6.2", "jquery": "2.2.3", "font-awesome": "~4.7.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/font-awesome.css" rel="stylesheet" />
Your head markup should look like the following
<head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <link href="~/lib/font-awesome/css/font-awesome.css" rel="stylesheet" /> <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <link href="~/css/Styles.css" rel="stylesheet" /> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> </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
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.
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
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:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <link href="~/lib/font-awesome/css/font-awesome.css" rel="stylesheet" /> <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <link href="~/css/Styles.css" rel="stylesheet" /> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> </head> <body> <div> <header> <nav class="navbar navbar-default navbar-fixed-top"> <div class="row"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#"></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li> <li><a href="#about"><i class="fa fa-coffee" aria-hidden="true"></i> About</a></li> <li><a href="#contact"><i class="fa fa-envelope" aria-hidden="true"></i> Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-product-hunt" aria-hidden="true"></i> Products <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Beverages</a></li> <li><a href="#">Condiments</a></li> <li><a href="#">Confections</a></li> <li><a href="#">Dairy Products</a></li> <li><a href="#">Grains/Cereals</a></li> <li><a href="#">Meat/Poultry</a></li> <li><a href="#">Produce</a></li> <li><a href="#">Seafood</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </nav> <div class="jumbotron" id="header-jumbotron"> <h2>Northwind Cafe</h2> </div> </header> @RenderBody() </div> </body> </html>
ASP.NET Core Posts:
- How To Create An ASP.NET Core Application From Scratch
- ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json
- Enable MVC On ASP.NET Core Application
- ASP.NET Core : Create Our First Controller and View
- ASP.NET Core : Adding The Default View With _ViewStart.cshtml
- ASP.NET Core : Create A Responsive Layout With Bootstrap
- ASP.NET Core : Adding Font-Awesome For Northwind Cafe Navigation Icons
- ASP.NET Core : Add .json Configuration Files With Microsoft.Extensions.Configuration Library
- ASP.NET Core : Entity Framework Core Models For Northwind Cafe
- ASP.NET Core : Create The NothwindContext ( EntityFrameworkCore )
- ASP.NET Core : Configure project.json File To Support Entity Framework Core
- ASP.NET Core : Add NorthwindContext To Startup Class And Create Database
- ASP.NET Core: Seeding The NorwindCafe Database
- ASP.NET Core: Add Logging To The NorthwindCafe Application
Subscribe to:
Post Comments (Atom)
Search This Blog
Tags
Web Development
Linux
Javascript
DATA
CentOS
ASPNET
SQL Server
Cloud Computing
ASP.NET Core
ASP.NET MVC
SQL
Virtualization
AWS
Database
ADO.NET
AngularJS
C#
CSS
EC2
Iaas
System Administrator
Azure
Computer Programming
JQuery
Coding
ASP.NET MVC 5
Entity Framework Core
Web Design
Infrastructure
Networking
Visual Studio
Errors
T-SQL
Ubuntu
Stored Procedures
ACME Bank
Bootstrap
Computer Networking
Entity Framework
Load Balancer
MongoDB
NoSQL
Node.js
Oracle
VirtualBox
Container
Docker
Fedora
Java
Source Control
git
ExpressJS
MySQL
NuGet
Blogger
Blogging
Bower.js
Data Science
JSON
JavaEE
Web Api
DBMS
DevOps
HTML5
MVC
SPA
Storage
github
AJAX
Big Data
Design Pattern
Eclipse IDE
Elastic IP
GIMP
Graphics Design
Heroku
Linux Mint
Postman
R
SSL
Security
Visual Studio Code
ASP.NET MVC 4
CLI
Linux Commands
Powershell
Python
Server
Software Development
Subnets
Telerik
VPC
Windows Server 2016
angular-seed
font-awesome
log4net
servlets
tomcat
AWS CloudWatch
Active Directory
Angular
Blockchain
Collections
Compatibility
Cryptocurrency
DIgital Life
DNS
Downloads
Google Blogger
Google Chrome
Google Fonts
Hadoop
IAM
KnockoutJS
LINQ
Linux Performance
Logging
Mobile-First
Open Source
Prototype
R Programming
Responsive
Route 53
S3
SELinux
Software
Unix
View
Web Forms
WildFly
XML
cshtml
githu
Liên hệ Aivivu, đặt vé máy bay tham khảo
ReplyDeletevé máy bay đi Mỹ hạng thương gia
vé máy bay từ mỹ về việt nam bao nhiêu tiền
bay từ đức về việt nam mấy tiếng
bao giờ có chuyến bay từ nga về việt nam
các chuyến bay từ anh về việt nam
bay từ pháp về việt nam mấy tiếng
chuyến bay chuyên gia