Live Code Editor Version 2.0

Hướng dẫn tạo các nút liên kết mạng xã hội bằng HTML và CSS - demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        .fa {
            padding: 20px;
            font-size: 25px;
            width: 20px;
            text-align: center;
            text-decoration: none;
            margin: 5px 2px;
            border-radius: 50%;
        }
         
        .fa:hover {
            opacity: 0.7;
        }
         
        .fa-facebook {
            background: #3B5998;
            color: white;
        }
         
        .fa-twitter {
            background: #55ACEE;
            color: white;
        }
         
        .fa-google {
            background: #dd4b39;
            color: white;
        }
         
        .fa-youtube {
            background: #bb0000;
            color: white;
        }
    </style>
    <link rel="stylesheet" href="https://freetuts.net/cnd/css/fontawesome/4.7.0/css/font-awesome.min.css">
    <body>
        <h1>Học lập trình miễn phí tại Freetuts.net</h1>
        <div id="link">
            <a href="#" class="fa fa-facebook"></a>
            <a class="fa fa-youtube"></a>
            <a href="#" class="fa fa-twitter"></a>
            <a href="#" class="fa fa-google"></a>
        </div>
    </body>
</html>