Hướng dẫn tạo Icon Bar với HTML, CSS và Javascript - Giao diện RUN
 
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <link rel="stylesheet" href="https://freetuts.net/cnd/css/fontawesome/4.7.0/css/font-awesome.min.css">
6
        <style type="text/css">
7
            .container {
8
                width: 50%;
9
                margin: auto;
10
            }
11
            .icon-bar {
12
                width: 100%;
13
                background-color: #555;
14
                overflow: auto;
15
            }
16
17
            .icon-bar a {
18
                float: left;
19
                width: 20%;
20
                text-align: center;
21
                padding: 12px 0;
22
                transition: all 0.3s ease;
23
                color: white;
24
                font-size: 36px;
25
            }
26
27
            .icon-bar a:hover {
28
                background-color: #000;
29
            }
30
31
            .active {
32
                background-color: #4CAF50 !important;
33
            }
34
        </style>
35
    </head>
36
    <body>
37
38
        <div class="container">
39
            <h1>Freetuts.net hướng dẫn tạo Icon Bar</h1>
40
            <div class="icon-bar">
41
                <a class="active" href="#"><i class="fa fa-home"></i></a>
42
                <a href="#"><i class="fa fa-search"></i></a>
43
                <a href="#"><i class="fa fa-envelope"></i></a>
44
                <a href="#"><i class="fa fa-globe"></i></a>
45
                <a href="#"><i class="fa fa-trash"></i></a>
46
            </div>
47
        </div>
48
    </body>
49
</html>
PHÓNG TO