Unknown
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.
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;
}