Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (footer section social link angular 8 project ) Part 12
In this tutorial, we will create a social link in the footer section..In the footer section, we will use some social icons, so we need to install the library of icons.
How To use font awesome in angular 8
1. First of all you can download font awesome 4 library (click here for download font awesome 4 library)
2. after downloading library you will get one zip file
3. extract zip file . after extracting zip file you can get some folder
4. You paste the folder of Font Awesome library into the assets folder of your Angular 8 project by making a folder named font.
5. link font awesome css file on angular.json file
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/assets/font/css/font-awesome.min.css",
"src/styles.css"
],
After link font awesome css on angular.json file we will make social link section on footer
Open app.component.html File
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
<div class="container">
<a class="navbar-brand" routerLink="/">HMS</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/room-booking-request">Room Booking</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/feedback">Feedback</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/auth">Login</a>
</li>
</ul>
</div>
</nav>
<div class="page_container">
<router-outlet></router-outlet>
</div>
<div class="footer">
<div class="row">
<div class="col-sm-4 subscribe_box">
<p class="footer_text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<h4 class="footer_text">For Letest Update Subscribe Now</h4>
<input type="email" name="email" class="form-control" placeholder="E-Mail" />
</div>
<div class="col-sm-4">
<h4 class="text-center mt-4 mb-4 footer_text">Contact Information</h4>
<table>
<tr>
<td class="contect_tab footer_text">E-Mail</td>
<td class="contect_tab footer_text">example@gmail.com</td>
</tr>
<tr>
<td class="contect_tab footer_text">Mobile No</td>
<td class="contect_tab footer_text">999999999</td>
</tr>
<tr>
<td class="contect_tab footer_text">Address</td>
<td class="contect_tab footer_text">Your Address</td>
</tr>
</table>
</div>
<div class="col-sm-4">
<div class="social_link_box">
<div class="social_icons"><i class="fa fa-facebook"></i></div>
<div class="social_icons"><i class="fa fa-google-plus"></i></div>
<div class="social_icons"><i class="fa fa-youtube"></i></div>
<div class="social_icons"><i class="fa fa-twitter"></i></div>
</div>
</div>
</div>
</div>
Open app.component.css File
.page_container {
margin-top: 40px;
margin-bottom: 70px;
}
.footer {
background: #343a40;
height: 250px;
}
.footer_text {
color: white;
}
.subscribe_box {
padding-left: 29px;
padding-top: 25px;
}
.contect_tab {
width: 50%;
height: 39px;
padding-left: 39px;
}
.social_icons {
width: 50px;
float: left;
color: white;
font-size: 30px;
padding: 52px;
}
Tutorial Topics
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (Angular 8 Project Tutorial Environment Setup ) Part 1
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (How to install bootstrap in angular 8 project)
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (how to install laravel project on localhost ) Part 3
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel | Overview part 4
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (Angular 8 project folder structure) Part 5
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (laravel project folder structure) Part 6
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (Remove public on laravel project URL) Part 7
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (What is component in angular project ) Part 8
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (create user section related component in angular ) Part 9
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (global navigation and footer setup in angular 8 project) Part 10
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (angular 8 project user component routing) Part 11
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (footer section social link angular 8 project ) Part 12
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page bootstrap slider setup angular 8 project ) Part 13
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page bootstrap slider setup angular 8 project ) Part 14
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page service section angular 8 project ) Part 15
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page service section angular 8 project ) Part 16
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (laravel project environment setup for web api (web service) ) Part 17
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (model and migration creation and api server side validation in laravel for contect form) Part 18
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (contact form api in laravel ) Part 19
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (contact form api | laravel api calling from angular 8 project ) Part 20
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (contact form api | laravel api calling from angular 8 project ) Part 21
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (contact form api | laravel api calling from angular 8 project ) Part 21