Home / Coding / Font Awesome / Tutorial Blogspot / Koleksi Font Awesome Berwarna - Brand Dan Social Icons

Cara Cepat Koleksi Font Awesome Berwarna - Brand Dan Social Icons Update Terbaru

Sedikit Info Seputar Koleksi Font Awesome Berwarna - Brand Dan Social Icons Terbaru 2017 - Hay gaes kali ini team Android Media, kali ini akan membahas artikel dengan judul Koleksi Font Awesome Berwarna - Brand Dan Social Icons, kami selaku Team Android Media telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Media. semoga isi postingan tentang Artikel Coding, Artikel Font Awesome, Artikel Tutorial Blogspot, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Koleksi Font Awesome Berwarna - Brand Dan Social Icons Terbaru
link: Koleksi Font Awesome Berwarna - Brand Dan Social Icons

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Koleksi Font Awesome Berwarna - Brand Dan Social Icons Terbaru dan Terlengkap 2017

Font Awesome Colored Collections - Brand And Social Icons - Posting kali ini saya akan membagikan koleksi font awesome Berwarna - Brand Dan Social Icons



Font Awesome Colored Collections - Brand And Social Icons -

Font Awesome Colored - Brand And Social Icons

<ul class="social-icons icon-circle list-unstyled list-inline"> 
  <li> <a href="#"><i class="fa fa-adn"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-android"></i></a> </li>   
  <li> <a href="#"><i class="fa fa-apple"></i></a> </li>
  <li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-bitbucket-square"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-css3"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-dribbble"></i></a></li> 
  <li> <a href="#"><i class="fa fa-dropbox"></i></a></li> 
  <li> <a href="#"><i class="fa fa-facebook"></i></a></li> 
  <li> <a href="#"><i class="fa fa-facebook-square"></i></a></li> 
  <li> <a href="#"><i class="fa fa-flickr"></i></a></li> 
  <li> <a href="#"><i class="fa fa-foursquare"></i></a></li> 
  <li> <a href="#"><i class="fa fa-github"></i></a></li> 
  <li> <a href="#"><i class="fa fa-github-alt"></i></a></li> 
  <li> <a href="#"><i class="fa fa-github-square"></i></a></li> 
  <li> <a href="#"><i class="fa fa-google-plus"></i></a></li> 
  <li> <a href="#"><i class="fa fa-google-plus-square"></i></a></li> 
  <li> <a href="#"><i class="fa fa-html5"></i></a></li> 
  <li> <a href="#"><i class="fa fa-instagram"></i></a></li> 
  <li> <a href="#"><i class="fa fa-linkedin"></i></a></li> 
  <li> <a href="#"><i class="fa fa-linkedin-square"></i></a></li> 
  <li> <a href="#"><i class="fa fa-linux"></i></a></li> 
  <li> <a href="#"><i class="fa fa-maxcdn"></i></a></li> 
  <li> <a href="#"><i class="fa fa-pagelines"></i></a></li> 
  <li> <a href="#"><i class="fa fa-pinterest"></i></a></li> 
  <li> <a href="#"><i class="fa fa-pinterest-square"></i></a></li> 
  <li> <a href="#"><i class="fa fa-renren"></i></a></li> 
  <li> <a href="#"><i class="fa fa-skype"></i></a></li> 
  <li> <a href="#"><i class="fa fa-stack-exchange"></i></a></li> 
  <li> <a href="#"><i class="fa fa-stack-overflow"></i></a></li> 
  <li> <a href="#"><i class="fa fa-trello"></i></a></li>
  <li> <a href="#"><i class="fa fa-tumblr"></i></a></li>
  <li> <a href="#"><i class="fa fa-tumblr-square"></i></a></li>
  <li> <a href="#"><i class="fa fa-twitter"></i></a></li>
  <li> <a href="#"><i class="fa fa-twitter-square"></i></a></li>
  <li> <a href="#"><i class="fa fa-vimeo-square"></i></a></li>
  <li> <a href="#"><i class="fa fa-vk"></i></a></li>
  <li> <a href="#"><i class="fa fa-weibo"></i></a></li>
  <li> <a href="#"><i class="fa fa-windows"></i></a></li>
  <li> <a href="#"><i class="fa fa-xing"></i></a></li>
  <li> <a href="#"><i class="fa fa-xing-square"></i></a></li>
  <li> <a href="#"><i class="fa fa-youtube"></i></a></li>
  <li> <a href="#"><i class="fa fa-youtube-play"></i></a></li>
  <li> <a href="#"><i class="fa fa-youtube-square"></i></a></li> 
</ul>

Social Icons - Hover Zoom (.icon-zoom)

<ul class="social-icons icon-circle icon-zoom list-unstyled list-inline"> 
  <li><a href="#"><i class="fa fa-adn"></i></a> </li> 
  <li><a href="#"><i class="fa fa-android"></i></a> </li>   
  <li> <a href="#"><i class="fa fa-apple"></i></a> </li>
  <li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-css3"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-dribbble"></i></a></li> 
  <li> <a href="#"><i class="fa fa-dropbox"></i></a></li> 
  <li> <a href="#"><i class="fa fa-facebook"></i></a></li>  
  <li> <a href="#"><i class="fa fa-flickr"></i></a></li> 
  <li> <a href="#"><i class="fa fa-foursquare"></i></a></li> 
</ul>

Social Icons - Hover Rotate (.icon-rotate)

<ul class="social-icons icon-circle icon-rotate list-unstyled list-inline"> 
  <li> <a href="#"><i class="fa fa-adn"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-android"></i></a> </li>   
  <li> <a href="#"><i class="fa fa-apple"></i></a> </li>
  <li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-css3"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-dribbble"></i></a></li> 
  <li> <a href="#"><i class="fa fa-dropbox"></i></a></li> 
  <li> <a href="#"><i class="fa fa-facebook"></i></a></li>  
  <li> <a href="#"><i class="fa fa-flickr"></i></a></li> 
  <li> <a href="#"><i class="fa fa-foursquare"></i></a></li>   
</ul>

Social Icons - Rounded (.icon-rounded)

<ul class="social-icons icon-rounded  list-unstyled list-inline"> 
  <li> <a href="#"><i class="fa fa-adn"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-android"></i></a> </li>   
  <li> <a href="#"><i class="fa fa-apple"></i></a> </li>
  <li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-css3"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-dribbble"></i></a></li> 
  <li> <a href="#"><i class="fa fa-dropbox"></i></a></li> 
  <li> <a href="#"><i class="fa fa-facebook"></i></a></li>  
  <li> <a href="#"><i class="fa fa-flickr"></i></a></li> 
  <li> <a href="#"><i class="fa fa-foursquare"></i></a></li>   
</ul>

Social Icons - Flat (.icon-flat)

<ul class="social-icons icon-flat list-unstyled list-inline"> 
  <li> <a href="#"><i class="fa fa-adn"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-android"></i></a> </li>   
  <li> <a href="#"><i class="fa fa-apple"></i></a> </li>
  <li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-css3"></i></a> </li> 
  <li> <a href="#"><i class="fa fa-dribbble"></i></a></li> 
  <li> <a href="#"><i class="fa fa-dropbox"></i></a></li> 
  <li> <a href="#"><i class="fa fa-facebook"></i></a></li>  
  <li> <a href="#"><i class="fa fa-flickr"></i></a></li> 
  <li> <a href="#"><i class="fa fa-foursquare"></i></a></li>   
</ul>


/*Change icons size here*/
.social-icons .fa {
	font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #FFF;
	color: rgba(255, 255, 255, 0.8);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa{ 
	border-radius: 50%;
}
.social-icons.icon-rounded .fa{
	border-radius:5px;
}
.social-icons.icon-flat .fa{
	border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
	color: #FFF;
	-webkit-box-shadow: 1px 1px 3px #333;
	-moz-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 3px #333; 
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active { 
 	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1); 
}
.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active { 
	-webkit-transform: scale(1.1) rotate(360deg);
	-moz-transform: scale(1.1) rotate(360deg);
	-ms-transform: scale(1.1) rotate(360deg);
	-o-transform: scale(1.1) rotate(360deg);
	transform: scale(1.1) rotate(360deg);
}
 
.social-icons .fa-adn{background-color:#504e54;} 
.social-icons .fa-apple{background-color:#aeb5c5;} 
.social-icons .fa-android{background-color:#A5C63B;}  
.social-icons .fa-bitbucket,.social-icons .fa-bitbucket-square{background-color:#003366;} 
.social-icons .fa-bitcoin,.social-icons .fa-btc{background-color:#F7931A;} 
.social-icons .fa-css3{background-color:#1572B7;} 
.social-icons .fa-dribbble{background-color:#F46899;}  
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}  
.social-icons .fa-flickr{background-color:#FF0084;}
.social-icons .fa-foursquare{background-color:#0086BE;}
.social-icons .fa-github,.social-icons .fa-github-alt,.social-icons .fa-github-square{background-color:#070709;} 
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;} 
.social-icons .fa-html5{background-color:#E54D26;}
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;} 
.social-icons .fa-linux{background-color:#FBC002;color:#333;}
.social-icons .fa-maxcdn{background-color:#F6AE1C;}
.social-icons .fa-pagelines{background-color:#241E20;color:#3984EA;}
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;} 
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-stack-exchange{background-color:#245590;}
.social-icons .fa-stack-overflow{background-color:#FF7300;}
.social-icons .fa-trello{background-color:#265A7F;}
.social-icons .fa-tumblr,.social-icons .fa-tumblr-square{background-color:#314E6C;} 
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;} 
.social-icons .fa-vimeo-square{background-color:#229ACC;}
.social-icons .fa-vk{background-color:#375474;}
.social-icons .fa-weibo{background-color:#D72B2B;}
.social-icons .fa-windows{background-color:#12B6F3;}
.social-icons .fa-xing,.social-icons .fa-xing-square{background-color:#00555C;} 
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}



View Demo





Itulah sedikit Artikel Koleksi Font Awesome Berwarna - Brand Dan Social Icons terbaru dari kami

Semoga artikel Koleksi Font Awesome Berwarna - Brand Dan Social Icons yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Media. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Koleksi Font Awesome Berwarna - Brand Dan Social Icons

Share this

Google Facebook Twitter More