Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

CSS Icon Social Network Flat UI Dengan Font Awesome

CSS Icon Social Network Flat UI Dengan Font Awesome CSS Icon Social Network Flat UI Dengan Font Awesome – lama tidak update artikel jadi lumayan bingung mau menulis apa dan mulai dari mana. Tapi pada intinya seperti biasa hanya membahas tentang CSS untuk yang suka bermain kode dan mencoba untuk merubah tampilan blog. Tentu semua sudah tahu tentang font awesome, ikonik font yang banyak di gunakan oleh blogger untuk membuat ikon dengan cara yang ringkas ke dalam tampilan blog mereka. Membuat ikon jaringan sosial dan menerapkan ke dalam blog merupakan salah satu cara untuk menarik perhatian dan mendapatkan pengunjung ke jejaring sosial anda. Demikian juga untuk memudahkan mereka untuk menemukan situs anda di akun jejaring social lain. Icon pack social network flat UI ini lumayan lengkap sehingga akun apapun yang anda punya dapat dengan mudah untuk di tempatkan ke dalam area widget pada blog anda. Terdapat 30 akun social network, yang ukuran dan bentuk ikon serta efek hover bisa di sesuaikan agar sesuai dengan blog masing-masing. Berbagai pilihan bentuk icon media social dan efek hover bisa dilihat ada di halaman demo.

Langkah pertama yang perlu di perhatikan adalah pada template sudah terpasang font awesome, jika belum bisa memeasang terlebih dahulu dengan menaruh kode berikut ini dan taruh di atas kode </head> pada template.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
CSS Icon Social Network Flat UI Dengan Font Awesome Berikut untuk kode CSS dan markup HTML masing-masing icon:
Taruh CSS di dalam tag <style> atau sebelum </style>
.sc-network a{color:#fff;width:50px;height:50px;display:block;margin:2px;text-align:center;float:left;font-size:40px}
.sc-network a:hover{opacity:0.5}
.sc-network i{line-height:50px}
.fac{background:#3B5998}.twi{background:#39A9E0}.gog{background:#D14836}.rss{background:#FF8300}.yut{background:#CD332D}.lin{background:#007FB1}.git{background:#4183C4}.pin{background:#CB2027}.ins{background:#3F729B}.fli{background:#0063DB}.tum{background:#2C4762}.stu{background:#EB4924}.dig{background:#14589E}.red{background:#FF4500}.dri{background:#EA4C89}.wor{background:#21759B}.vim{background:#4BF}.del{background:#3274D1}.dev{background:#4B5D50}.and{background:#A4C639}.apl{background:#B9BFC1}.sky{background:#00AFF0}.eml{background:#888}.jsf{background:#4679A4}.cdp{background:#000}.drp{background:#3277E3}.ht5{background:#E44D26}.cs3{background:#1572B6}.dru{background:#2AA9E0}.jom{background:#000}
Markup HTML Icon Social Network
<div class="sc-network">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
Ganti semua tanda # dengan link ID masing-masing.
Dari pola bentuk icon tersebut tentu dapat di modifikasi agar sesuai dengan tampilan blog masing-masing. CSS Icon Social Network Flat UI Dengan Font Awesome Seperti contoh diatas dengan menambahkan sedikit property border-radius:5px; pada .sc-network a{ … } untuk membuat icon sedikit melengkung pada setiap sudutnya atau bahkan mungkin dengan menambahkan border-radius:100%; agar setiap icon menjadi bulat/circle. CSS Icon Social Network Flat UI Dengan Font Awesome Pada intinya bentuk icon atur saja sesuai keinginan, seperti gambar di atas misalnya border-radius:15px 0px 15px;. CSS Icon Social Network Flat UI Dengan Font Awesome Untuk penyesuaian background jika ingin lebih simple maka semua icon di atur ke dalam warna yang sama dengan menambahkan background:#666; pada .sc-network a{ … } seperti contoh di atas. Untuk kode CSS secara lengkapnya seperti di bawah ini:
.sc-network a{background:#666;color:#fff;width:50px;height:50px;display:block;margin:2px;text-align:center;float:left;font-size:40px}
.sc-network a:hover{opacity:0.5}
.sc-network i{line-height:50px}
Sedangkan untuk markup HTML-nya tidak perlu menambahkan attribut class pada tag , contohnya seperti dibawah ini:
<div class="sc-network">
<a href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
</div>
Semua icon tentu tidak akan di pasang semuanya ke dalam blog, jadi hanya beberapa icon saja dengan akun yang sudah dimiliki.
Next
This is the most recent post.
Previous
Posting Lama

Berlangganan artikel via email

32 Response to "CSS Icon Social Network Flat UI Dengan Font Awesome"

PERTAMAXXXXX hehhehehe
mantep nih anemau coba pasang tapi yang tampilan 3d ada ga mas??? dari kemaren nyari yang 3d gak dapet2

Balas

Asliii kereen bngett ..

Balas

Ajib! Cakep banget icon2nya. Ijin copy dulu kodenya, gan.
Makasih ya

Balas

wah kirain udah lupa ngeblognya mas

Balas

biuh.. lama banget ya mas andes gg perna update, kemana aja mas :D
btw itu icon social networknya mantep banget mas, |o|

ayo mas yang rajin ngepost dong,, kita haus ilmu mu B-)

Balas

mantabs mas, ane mau coba pasang

Balas

Bagus ini, untuk memercantik blog.

Balas

Apa kbr nih mas broo...posting perdana setelah sekian lama ngilang hehehe

Balas

lge keluyuran cari koding, gak tau keluyuran kesini hehe :) gimane kabarnya mas? baik2 kan hehe..

Balas

tambahin aja mas pake box-shadow sama transform

Balas

mumpung inget ini mas lama gak posting jg

Balas

menikmati dunia nyata mas..hehehe
ya nanti kalo ada waktu luang update lagi

Balas

waduh udah keren pake banget.. ngeri :D

Balas

ya.. monggo di nikmati aja :D

Balas

alhamdlillah sehat mas, iya ini tumben pingin ngeblog :D

Balas

alhamdlillah baik mbak, iya saya juga rencana mau renovasi template. pertama buka kaget loadnya udah lelet banget :D

Balas

wahahaha nongol lagi .. pa kabar nih ??

Balas

Mas Andes Keren , Boleh saya minta Template yang mas Andes Pake Buat saya pakai MAS ,

Balas

apa kabar mas???udah lama neh ga berkunjung ^_^

Balas

oh, syukur deh hehe.. :)

Balas

bagus banget mas...?mantep....

Balas

Keren mas Andes... wah lama tak jumpa kite kite ya?

Balas

Icon yang ask.fm nya nggak ada, ya?

Balas

Sipp gan, matur suwun tutor nya.

Balas

Ijin ganti warna untuk template darkforyou :D
Menurut abang warna apa yang bagus ya hehehe, ini aku cuma bisa segini bang cek di blog saya bang http://bnr-hack2015.blogspot.com/ kalau ada yang kurang mohon bimbingannya :D

Balas

Seasonings is Flat UI. Flat UI is perfect when placed into CSS buttons with Font Awesome. News Boy 411

Balas

hmm.. mas andes ngilang kemana sihh. kok gak pernah update lagi??? :(

Balas

Great post!

Useful information worthy of thanks ,

http://ixgram.com

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "CSS Icon Social Network Flat UI Dengan Font Awesome" ini bermanfaat, share ke jejaring sosial.
Konversi Kode