Hafiz Zulkafly

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.

2 comments

  1. Halo kak!
    Thank you so much for the tutorial, but could you help me making navigation using those social icons just like your navigation bar right now? I've been searching for hours but still have no clue at all :(( Btw thank you very much again for all your tutorials, salam from Indonesia! :D

    ReplyDelete
    Replies
    1. how can i help you then? do you have telegram?
      or twitter?

      leave me your twitter username or telegram id,
      so that i could reach you and teach you personally.

      cause right now i seldom-ly online my blog.

      Delete

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED