How to Create Menu Item With Icon and Text | Navbar With Icons HTML CSS
How to Create Menu Item With Icon and Text | Navbar With Icons HTML CSS
In this YouTube video tutorial we are going to learn, how to create a Navbar With Icons HTML CSS or navigation Menu bar With font awesome Icons. This video is for you if you're looking for how to add a menu icon in HTML. we will also cover the Icon navigation menu bar and How to Use Font Awesome 5 Icons in the HTML Navigation navbar. #htmlcsswebsite, #htmlcss2022 , #htmlcssjavascripttutorial, #htmltutorial
--------------------
Contact Me Here For Any Web Design Project Work:
https://tinyurl.com/ybbczhrp
-------------------
Follow these steps to create a navigation menu bar using HTML and CSS:
1. Create a new HTML file in your code editor named icon-bar.html
2. To add font awesome icons, Link your HTML file with font awesome website using CDN link
Website Link: https://fontawesome.com/
Font Awesome 5 CDN Link: https://fontawesome.com/v5.15/how-to-...
3. Create a container div with a class named navbar.
5. Inside navbar div, create a div with logo class and another div with icon-bar class.
6. Now, search icons of your choice and paste the HTML code of font-awesome 5 icon inside the HTML anchor tag.
7. Add CSS (Cascading stylesheet) to style the navigation menu bar.
8. Add the following CSS flexbox navbar properties to make the navigation bar inline and centered horizontally and vertically.
.navbar{
width: 100%;
height: 100px;
display: flex;
align-items: center;
background: linear-gradient(to bottom, white, #dddddd);
}
9. Now, add the following CSS properties for the navbar logo
.navbar .logo{
font-size: 20px;
font-weight: 900px;
margin: 0 20px;
}
10. Now, Add the following CSS properties for the font awesome icon styling to make the navigation menu items at the center of the parent div, vertically and horizontally.
/* styling icon bar */
.icon-bar{
width: 100%;
display: flex;
align-items: center;
justify-content: center; /* horizontal center */
}
/* styling each icon in Icon bar */
.icon-bar a{
text-align: center;
padding: 20px 30px;
font-size: 25px;
}
Video Topics:
0:00 Video intro
0:32 Navbar With Icons HTML code.
1:54 How to add font awesome 5 CDN link?
2:34 How to add icons with font awesome html?
6:08 How to add menu item with Icon and Text?
7:38 CSS Vertically and horizontally center the navbar items.
8:03 Background gradient color Icon navigation menu bar
8:40 How to put logo in navigation bar CSS?
9:28 How to style navbar with font awesome icons CSS?
12:45 How to create navbar hover effects css?
13:22 Final output
#navbar #menubar #navigationbar
Related category searches:
how to add icons with navigation bar ,
how to create navigation bar in html and css,
icon above text in a navbar menu html css,
html css navigation bar with icons,
how to place icon in navigation bar,
how to add icons in navigation bar menus using css,
how to create responsive navigation bar in html and css
-----------------------------------------------------------
𝗦𝗼𝘂𝗿𝗰𝗲 𝗖𝗼𝗱𝗲 𝗟𝗶𝗻𝗸 !
https://hmawebdesign.com/
---------------------------------------------------------------
Suggested Videos:
Complete User Registration & Login System with PHP and MySQL Database | PHP Login System
• Registration and Login Form in PHP an...
How to Create Responsive Sign Up Form with HTML5 CSS3 | How to create a signup page
• Creating a Mobile-Friendly Sign Up Fo...
How to Add Font Awesome Icons in HTML Website in 2021 Font Awesome Installation Guide
• How to Use Font Awesome Icons in HTML...
10 Input Types in HTML Every Web Developer Must Know in 2021 | HTML5 Input Types Tutorials
• 10 Input Types in HTML Every Web Deve...
How to Design a Responsive HTML Email Template from Scratch 2021 | Create HTML Newsletter
• How to Design a Responsive HTML Emai...
How to Send Email to Client Using PHP Mail Function | Sending Email in PHP 2021 Tutorial
• How to Send Email to Client Using PHP...
$_POST | What is the Post Variable in PHP | How to Use Post Variables in PHP 2021
• $_POST | What is the Post Variable in...
How to Define Variables in PHP | How to Create PHP Variables | (PHP tutorial-3) - 2021
• How to Define Variables in PHP | How ...
How to Start First PHP Web Project on Local Server/Localhost PHP Tutorial-2
• How to Start First PHP Web Project on...
How to Get Start PHP Hello World Page on Live Web Server | PHP Tutorial - 1
• how to Get Started with PHP and Write...
-------------------------------------------------------------------------------------------------
Contact me through social media for web development work:
Fiverr https://www.fiverr.com/haaddison1?up_...
witter: / hmawebdesign
Facebook: / hmawebdesign
LinkedIn: / engrmianayub
Instagram / hmawebdesign