√ CSS3 Icon Social Network Flat UI dengan Font Awesome

CSS3 Icon Social Network Flat UI dengan Font Awesome

6/19/2017

CSS3 Icon Social Network Flat UI dengan Font Awesome – Tentu semua sudah tahu tentang font awesome, iconik 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.

DEMO

CSS3 Icon Social Network Flat UI dengan Font Awesome

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'/>

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:.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 }

<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>