"Font Awsome Icon Design With Youtube Video"
Bootstrap 3.3.0 Snippet by Divscodebd

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title>Icon Button</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/home"> <span class="content-box-icon bg-vaiolet"> <i class="fa fa-dashboard"></i> </span> <h4>Dashboar</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/admission/online"> <span class="content-box-icon bg-light-blue"> <i class="fa fa-dashboard"></i> </span> <h4>Online Admission</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/Student/student_menu"> <span class="content-box-icon bg-light-red"> <i class="fa fa-users"></i> </span> <h4>Students</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/teachers/teacher"> <span class="content-box-icon bg-blue"> <i class="fa fa-users"></i> </span> <h4>Teachers</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/parents/parent1"> <span class="content-box-icon bg-vaiolet"> <i class="fa fa-users"></i> </span> <h4>Parents</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/hrm/employee"> <span class="content-box-icon bg-light-blue"> <i class="fa fa-briefcase"></i> </span> <h4>Employees</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/courses/manageCourse"> <span class="content-box-icon bg-light-red"> <i class="fa fa-gear"></i> </span> <h4>Manage Course</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/student/attendence"> <span class="content-box-icon bg-blue"> <i class="fa fa-bars"></i> </span> <h4>Attendance</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/courses/class_routine_manage"> <span class="content-box-icon bg-vaiolet"> <i class="fa fa-th"></i> </span> <h4>Class Routine</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/accounts/account"> <span class="content-box-icon bg-light-blue"> <i class="fa fa-money"></i> </span> <h4>Accounts</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/notices/notice"> <span class="content-box-icon bg-light-red"> <i class="fa fa-file-o"></i> </span> <h4>Notice</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/testimonial/"> <span class="content-box-icon bg-blue"> <i class="fa fa-graduation-cap"></i> </span> <h4>Testmonial</h4> </a> </div> </div> <div class="col-md-2"> <div class="content-box text-center"> <a href="http://localhost/sms/index.php/admin/settings/setting"> <span class="content-box-icon bg-vaiolet"> <i class="fa fa-cogs"></i> </span> <h4>Settings</h4> </a> </div> </div> </div> <div class="col-md-4"> <iframe style="width:100%; height:250px;" height="315" src="https://www.youtube.com/embed/R0g_9g9vb2A" frameborder="0" allowfullscreen></iframe> </div> <div class="col-md-4"> <iframe style="width:100%; height:250px;" height="315" src="https://www.youtube.com/embed/mc3aTxClUAk" frameborder="0" allowfullscreen></iframe> </div> <div class="col-md-4"> <iframe style="width:100%; height:250px;" src="https://www.youtube.com/embed/1A6OIzOY7zk" frameborder="0" allowfullscreen></iframe> </div> </div> </body> </html>
.content-box { position: relative; box-shadow: 1px 4px 10px -6px #222; margin-bottom: 20px; padding: 1px 0px; margin-top:30px; } .content-box:hover .content-box-icon{ box-shadow: 1px 4px 10px -6px; } .content-box:hover a ,.content-box:active a ,.content-box:focus a{ text-decoration: none; } .content-box a h4 { color: #222; font-weight: 600; font-family: serif; font-size: 17px; } .content-box-icon { width: 50px; height: 50px; background: #ce2a1b; display: block; text-align: center; line-height: 50px; font-size: 25px; border-radius: 100%; margin: auto; color: #fff; } .bg-vaiolet{ background: #673ab7; } .bg-blue{ background:rgb(38, 172, 226); } .bg-light-red{ background: #e91740; } .bg-light-blue{ background: #009688; }

Related: See More

Vue Light Bootstrap Dashboard PRO
Bootstrap 4 Navbar with Icon Top
Hamburger Icon Animations
Navbar with Social icon & Dropdown

Questions / Comments: