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