21.Cách chèn các icon Số điện thoại, Facebook, Zalo.. vào website

Hướng dẫn cách chèn Icon Hotline, Icon Zalo, Facebook vào website của bạn

Đối với một theme wordpress bán hàng online, thì việc có thêm các nút kêu gọi hành động, sẽ giúp tăng đáng kể lượng tương tác của khách hàng đến với bạn. Hôm nay mình xin gửi đến các bạn bộ sưu tập các icon Hotline, Icon Zalo, Icon Facebook đẹp để chèn vào website. Với nhiều style, các bạn có thể lựa chọn style phù hợp với mình nhé !

Các bạn chỉ cần copy đoạn code và bỏ vào footer.php , và thay đổi lại số điện thoại, zalo,facebook trong thẻ a lại là được. Đối với theme Flatsome (Là các theme mua tại Web Khởi Nghiệp), các bạn chèn vào phần flatsome – Advanced- Global setting – Footer Script nhé . Sau khi chèn xong, các bạn ra trang chủ và nhấn Ctr F5 để load cache lại và trải nghiệm thành quả !

1. Icon Hotline, Zalo , Facebook dạng Cơ bản

<style>
    .div-nut {
        display: flex;
        flex-direction: column;
        font-size: 14px !important;
        position: fixed;
        z-index: 2147483647;
        bottom: 24px;
        left: 0;
        padding-left: 5px;
    }
    .div-nut > a {
        display: inline-block;
        overflow: visible !important;
        width: 54px !important;
        height: 54px !important;
        margin: 6px !important;
        background-size: 100% !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        margin: 8px;
        text-align: center;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto;
        cursor: pointer;
        position: relative;
    }
    .div-nut .nut-action:hover .tooltext {
        visibility: visible;
        opacity: 1;
    }
    .div-nut:hover .nut-action {
        text-decoration: none !important;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 4px 15px rgba(0, 0, 0, 0.13);
    }
    .div-nut .tooltext {
        visibility: hidden;
        font-size: 12px !important;
        line-height: 16px !important;
        text-align: center;
        white-space: nowrap;
        border-radius: 4px;
        padding: 8px;
        position: absolute;
        top: calc(50% - 16px);
        z-index: 1;
        opacity: 0;
        transition: opacity 0.5s;
        left: 120%;
        background-image: linear-gradient(180deg, #e57373 0%, #c62828 100%);
        color: #fff;
    }
    .div-nut .nut-goi {
        background-image: url("https://webkhoinghiep.net/wp-content/uploads/2020/10/call.svg");
    }
    .div-nut .nut-zalo {
        background-image: url("https://webkhoinghiep.net/wp-content/uploads/2020/10/zalo.svg");
    }
    .div-nut .nut-face {
        background-image: url("https://webkhoinghiep.net/wp-content/uploads/2020/10/messenger.svg");
    }
</style>
<div class="div-nut">
    <a href="tel:0935743575" class="nut-goi nut-action">
        <div><span class="tooltext">Gọi ngay</span></div>
    </a>
    <a href="http://zalo.me/0935743575" target="_blank" class="nut-zalo nut-action">
        <div><span class="tooltext">Chat với chúng tôi qua Zalo</span></div>
    </a>
    <a href="https://m.me/webkhoinghiepnhatrang/" target="_blank" class="nut-face nut-action">
        <div><span class="tooltext">Facebook Messenger</span></div>
    </a>
</div>

2. Icon Hotline, Zalo, Facebook dạng text đơn giản

<style>
    .float-contact {
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 99999;
    }
    .chat-zalo {
        background: #8eb22b;
        border-radius: 20px;
        padding: 0 18px;
        color: white;
        display: block;
        margin-bottom: 6px;
    }
    .chat-face {
        background: #125c9e;
        border-radius: 20px;
        padding: 0 18px;
        color: white;
        display: block;
        margin-bottom: 6px;
    }
    .float-contact .hotline {
        background: #d11a59 !important;
        border-radius: 20px;
        padding: 0 18px;
        color: white;
        display: block;
        margin-bottom: 6px;
    }
    .chat-zalo a,
    .chat-face a,
    .hotline a {
        font-size: 13px;
        color: white;
        font-weight: 400;
        text-transform: none;
        line-height: 0;
    }
    @media (max-width: 549px) {
        .float-contact {
            display: none;
        }
    }
</style>
<div class="float-contact">
    <button class="chat-zalo"><a href="http://zalo.me/0867592210">Chat Zalo</a></button> <button class="chat-face"><a href="http://m.me/moosun.vn">Chat Facebook</a></button>
    <button class="hotline"><a href="tel:0867592210">Hotline: 0867592210</a></button>
</div>

3. Ion Hotline, Zalo, Hotline dạng nút động

<style>
    @keyframes pulse {
        from,
        to {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
        50% {
            -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
        }
    }
    @-webkit-keyframes zoomIn {
        from {
            opacity: 0;
            -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
        }
        50% {
            opacity: 1;
        }
    }
    @keyframes zoomIn {
        from {
            opacity: 0;
            -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
        }
        50% {
            opacity: 1;
        }
    }
    .cta-lptech {
        list-style: none;
        padding: 0;
        margin: 0;
        z-index: 999;
        position: fixed;
        bottom: 36px;
        left: 15px;
        width: 50px;
    }
    .cta-lptech li {
        width: 50px;
        float: left;
        margin-bottom: 10px;
    }
    .cta-lptech li a {
        height: 50px;
        line-height: 50px;
        background-color: #ff2a28;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }
    .cta-lptech li a i {
        font-size: 27px;
        color: #fff;
        padding: 12px;
    }
    .cta-lptech li a,
    .cta-lptech li a img {
        width: 50px;
        border-radius: 100%;
    }
    .cta-lptech li,
    .cta-lptech li a {
        display: inline-block;
    }
    .cta-lptech li a.zalo {
        background-color: #0180c7;
    }
    .animated.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }
    .mypage-alo-ph-circle,
    .mypage-alo-phone:hover .mypage-alo-ph-circle {
        border-color: #ffd53b !important;
    }
    .mypage-alo-ph-circle-fill,
    .mypage-alo-ph-img-circle,
    .mypage-alo-phone:hover .mypage-alo-ph-circle-fill,
    .mypage-alo-phone:hover .mypage-alo-ph-img-circle {
        background-color: rgba(244, 68, 56, 0.5);
    }
    .mypage-alo-ph-circle-fill {
        width: 60px;
        height: 60px;
        top: 56px;
        left: -5px;
        position: absolute;
        -ms-transition: all 0.2s ease-in-out;
        border-radius: 100%;
        border: 2px solid transparent;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        opacity: 0.4 !important;
    }
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .zoomIn {
        -webkit-animation-name: zoomIn;
        animation-name: zoomIn;
    }
    .mypage-alo-ph-circle {
        width: 80px;
        height: 80px;
        top: 45px;
        left: -16px;
        position: absolute;
        background-color: #774d4d00;
        border-radius: 100%;
        border: 2px solid rgba(30, 30, 30, 0.4);
        opacity: 0.1;
        opacity: 0.5;
    }
</style>
<ul class="cta-lptech">
    <li>
        <a aria-label="gửi mail cho chúng tôi" href="mailto:demo@web.com" title="Đăng ký tư vấn"><i class="fa fa-envelope"></i></a>
    </li>
    <li>
        <a aria-label="gọi điện thoại cho LPTech" href="tel:0963 400 234" title="gọi điện thoại " rel="noopener">
            <img src="https://webkhoinghiep.net/wp-content/uploads/2020/12/call.png" alt="gọi điện thoại cho chúng tôi" />
            <div class="animated infinite zoomIn mypage-alo-ph-circle"></div>
            <div class="animated infinite pulse mypage-alo-ph-circle-fill"></div>
        </a>
    </li>
    <li>
        <a href="https://zalo.me/0913245865" title="Chat zalo" rel="noopener" class="zalo" aria-label="gọi zalo cho LPTech"><img src="https://webkhoinghiep.net/wp-content/uploads/2020/12/zalo.png" alt="zalo" /></a>
    </li>
</ul>

4. Icon Zalo, Facebook, Google map dạng hiện dại

<style>
.phone-mobile {display: none;}
.giuseart-nav {
    position: fixed;
    left: 13px;
    background: #fff;
    border-radius: 5px;
    width: auto;
    z-index: 150;
    bottom: 50px;
    padding: 10px 0;
    border: 1px solid #f2f2f2;
}
.giuseart-nav ul {list-style: none;padding: 0;margin: 0;}
.giuseart-nav ul li {list-style: none!important;}
.giuseart-nav ul>li a {
    border:none;
    padding: 3px;
    display: block;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    line-height: 15px;
    color: #515151;
    font-weight: 700;
    max-width: 72.19px;
    max-height: 54px;
    text-decoration: none;
}
.giuseart-nav ul>li .chat_animation{display:none}
.giuseart-nav ul>li a i.ticon-heart {
    background: url(https://webkhoinghiep.net/wp-content/uploads/2021/10/icon-map.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}
.giuseart-nav ul>li a i.ticon-zalo-circle2 {
    background: url(https://webkhoinghiep.net/wp-content/uploads/2021/10/icon-zalo-circle2.png.pagespeed.ce_.iUc59tfITH.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.giuseart-nav li .button {
    background: transparent;
}.giuseart-nav ul>li a i.ticon-angle-up {
    background: url(https://webkhoinghiep.net/wp-content/uploads/2021/10/icon-angle-up.png.pagespeed.ce_.NGU5VowWiC.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.giuseart-nav ul>li a i {
    width: 33px;
    height: 33px;
    display: block;
    margin: auto;
}.giuseart-nav ul li .button .btn_phone_txt {
    position: relative; top:35px;
    font-size: 10px;
    font-weight: bold;
    text-transform: none;
}
.giuseart-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}.giuseart-nav ul>li a.chat_animation svg {
    margin: -13px 0 -20px;
}
.giuseart-nav ul>li a i.ticon-messenger {
    background: url(https://webkhoinghiep.net/wp-content/uploads/2021/10/icon-messenger.png.pagespeed.ce_.sSebhnGGgP.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.giuseart-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}
.giuseart-nav ul>li a i.ticon-chat-sms {
    background: url(https://webkhoinghiep.net/wp-content/uploads/2021/10/icon-sms-1.jpg) no-repeat;
    background-size: contain;
    width: 38px;
    height: 36px;
    display: block;
}
.giuseart-nav ul>li a i.icon-phone-w {
    background: url(https://webkhoinghiep.net/wp-content/uploads/2021/10/icon-phone-w.png) no-repeat;
    background-size: contain;}
.giuseart-nav ul li .button .btn_phone_txt {
    position: relative;
}
@media only screen and (max-width: 600px){
.giuseart-nav li .chat_animation{display:block !Important}
 
.giuseart-nav li .button .phone_animation {box-shadow: none;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translate(-50%,0);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #6cb917;
    line-height: 15px;
    border: 2px solid white;
}
.giuseart-nav ul>li a{padding:0; margin:0 auto}
.giuseart-nav {
    background: white;
    width: 100%; border-radius:0;
    color: #fff;
    height: 60px;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 5px;
    margin: 0;
    box-shadow: 0 4px 10px 0 #000;
}
.giuseart-nav li {
    float: left;
    width: 20%;
    list-style: none;
    height: 50px;
}
.phone-mobile{display:block !important}}
</style>
<div class="giuseart-nav">
        <ul>
            <li><a href="https://www.google.com/maps/place/GiuseArt+-+Thi%E1%BA%BFt+k%E1%BA%BF+%C4%91%E1%BB%93+h%E1%BB%8Da+v%C3%A0+website+chuy%C3%AAn+nghi%E1%BB%87p/@20.3534004,105.894187,17z/data=!3m1!4b1!4m5!3m4!1s0x3135acc6066cb537:0x4fc1c256d7cdb4d!8m2!3d20.3533954!4d105.8963757" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li>
            <li><a href="https://zalo.me/0972939830" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>
                        <li class="phone-mobile">
                            <a href="tel:0972939830" rel="nofollow" class="button">
                                <span class="phone_animation animation-shadow">
                                    <i class="icon-phone-w" aria-hidden="true"></i>
                                </span>
                                <span class="btn_phone_txt">Gọi điện</span>
                            </a>
                        </li>
                        <li><a href="https://www.messenger.com/t/joseph.thien.75" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
            <li><a href="sms:0972939830" class="chat_animation">
            <i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
                Nhắn tin SMS</a>
            </li>
            <li class="to-top-pc">
                <a href="#" rel="nofollow">
                    <i class="ticon-angle-up" aria-hidden="true" title="Quay lên trên"></i>
                </a>
            </li>
        </ul>
    </div>

5. Icon Hotline, Zalo, Facebook, Email bên phải

<div id="toc" class="ppocta-ft-fix">
        <div id="zaloButton" class="toc_button">
            <div class="toc_description">Chat với Thanh Tính qua Zalo</div>
            <a href="http://zalo.me/0909146772 " target="_blank" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Zalo Button', 'Mobile']);"><i class=""></i></a>
        </div>
        <div id="messengerButton" class="toc_button">
            <div class="toc_description">Chat ngay để nhận tư vấn</div>
            <a href="https://www.facebook.com/cameralaptopthanhtin/" target="_blank" ><i class=""></i></a>
        </div>
        
        <div id="callNowButton" class="toc_button">
            <div class="toc_description">Gọi ngay Thanh Tính Camera</div>
            <a href="tel:0909146772"><i class="icon-phone"></i></a>
        </div>
        
        <div id="callNowButtonClick" class="toc_button">
            <div class="toc_description">Để lại lời nhắn cho Thanh Tính</div>
            <a href="https://thanhtincamera.com/lien-he/"><i class="fa fa-envelope"></i></a>
        </div>
        
    </div>
<style>
.ppocta-ft-fix {
    position: fixed;
    bottom: 5px;
    right: 10px;
    text-align: center;
    z-index: 999;
    width: 60px;
}
#zaloButton {
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-bottom: 10px;
}
.toc_button {
    position: relative;
    box-shadow: 0 5px 10px rgb(0 0 0 / 15%), 0 4px 15px rgb(0 0 0 / 13%);
    border: 2px solid #fff!important;
}
#toc .toc_description {
    position: absolute;
    top: 5px;
    right: -300px;
    width: 200px;
    padding: 10px;
    font-size: 13px;
    line-height: 18px;
    z-index: 1;
    background-color: #ffd145;
    color: #111;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    border-radius: 3px 0 0 3px;
}
#toc .toc_description:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-left-color: #ffd145;
    border-width: 8px;
    margin-top: -8px;
}

#zaloButton>a>i {
    background: url(https://webkhoinghiep.net/wp-content/uploads/2022/06/widget_icon_zalo.svg) no-repeat scroll 0 0 transparent;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: 100%!important;
}
#messengerButton {
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-bottom: 10px;
}
#messengerButton>a>i {
    background: url(https://webkhoinghiep.net/wp-content/uploads/2022/06/widget_icon_messenger.svg) no-repeat scroll 0 0 transparent;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: 100%!important;
}
#callNowButton {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
}
#callNowButton i {
        color: white;
    border-radius: 100%;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #ed1c24;
    line-height: 50px;
    font-size: 24px;
}
#callNowButtonClick  i{
    color:white !important
}
#toc .toc_button:hover .toc_description {
    right: 68px;
    opacity: 1;
    filter: alpha(opacity=100);
}
#callNowButtonClick {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#callNowButtonClick i {
    border-radius: 100%;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #76b51b;
    line-height: 44px;
    font-size: 24px;
}

</style>

Như vậy là mình vừa kết thúc phần hướng dẫn thêm icon hotline, Icon Facebook, Icon Zalo vào trang web của bạn. Bài viết này sẽ liên tục cập nhật để đem đến cho các bạn nhiều mẫu icon đẹp hơn nữa. Chúc các bạn thành công !