Tutorial : Social Icons

Tuesday, November 29, 2016


Assalamualaikum & Selamat Sejahtera



First of all, ini bukan tutorial aku. I took from that website. Cuma ada few codes yang aku ubah ikut citarasa aku. Hahaha. Sekadar nak berkongsi dengan korang if any of you guys are looking for this. Macam mana social icons ni?


Thats it. So here is the codes ;

1. CSS Code.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

cari code <head> and paste code atas ni bawah code <head> and then save.


2. Add Gadget > HTML/JavaScript, and paste code bawah

<style>
#socialicons {
    text-align: center;
}
#socialicons .icon{
    color: black;
    display: inline-block;
    font-size: 20px;
    text-align: center;
    margin: 0 6px 5px;
}
#socialicons .icon:hover{
    color: blue;
}
</style>

<div id="socialicons">
<a class="icon" href="LINK"><i class="fa fa-twitter"></i></a>
<a class="icon" href="LINK"><i class="fa fa-facebook"></i></a>
<a class="icon" href="LINK"><i class="fa fa-instagram"></i></a>
<a class="icon" href="LINK"><i class="fa fa-google-plus"></i></a>
<a class="icon" href="LINK"><i class="fa fa-heart"></i></a>
<a class="icon" href="LINK"><i class="fa fa-pinterest"></i></a>
<a class="icon" href="LINK"><i class="fa fa-youtube"></i></a>
<a class="icon" href="LINK"><i class="fa fa-tumblr"></i></a>
<a class="icon" href="LINK"><i class="fa fa-rss"></i></a>
<a class="icon" href="mailto:LINK"><i class="fa fa-envelope"></i></a>
</div>


3. Edit semua bold code, save and Siap


Tell me if its not working okay, InshaAllah i'll try to help :)


Sekian.

No comments:

Post a Comment

Template Designer. Full Edit by Hafiz Zulkafly. All Right Reserved.