Cara Cepat Font Awesome Icons Dengan Variabel Merek Warna Update Terbaru

Sedikit Info Seputar Font Awesome Icons Dengan Variabel Merek Warna Terbaru 2017 - Hay gaes kali ini team Android Media, kali ini akan membahas artikel dengan judul Font Awesome Icons Dengan Variabel Merek Warna, 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 Font Awesome Icons Dengan Variabel Merek Warna Terbaru
link: Font Awesome Icons Dengan Variabel Merek Warna

Berbagi Font Awesome Icons Dengan Variabel Merek Warna Terbaru dan Terlengkap 2017

Font Awesome Icons with Brand Color Variables - Anda bosan dengan warna font awesome pada blog anda...? Dan ingin membuat font awesome di blog terlihat sedikit kece...? Ok baiklah saya akan berikan solusi untuk masalah tersebut. Saya akan menjelaskan cara memberi setuhan warna pada font awesome yang anda gunakan pada blog atau website anda. Tutorial ini cukup simpel anda cukup menambahkan atribut pada class font awesome yang ingin dimodifikasi warnanya.

Perhatikan contoh penerapannya di bawah ini :

HTML<i class="fa fa-adn"></i>
<i class="fa fa-android"></i>
<i class="fa fa-angellist"></i>
<i class="fa fa-apple"></i>
<i class="fa fa-behance"></i>
<i class="fa fa-behance-square"></i>
<i class="fa fa-bitbucket"></i>
<i class="fa fa-bitbucket-square"></i>
<i class="fa fa-bitcoin"></i>
<i class="fa fa-btc"></i>
<i class="fa fa-buysellads"></i>
<i class="fa fa-cc-amex"></i>
<i class="fa fa-cc-discover"></i>
<i class="fa fa-cc-mastercard"></i>
<i class="fa fa-cc-paypal"></i>
<i class="fa fa-cc-stripe"></i>
<i class="fa fa-cc-visa"></i>
<i class="fa fa-codepen"></i>
<i class="fa fa-connectdevelop"></i>
<i class="fa fa-css3"></i>
<i class="fa fa-dashcube"></i>
<i class="fa fa-delicious"></i>
<i class="fa fa-deviantart"></i>
<i class="fa fa-digg"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-dropbox"></i>
<i class="fa fa-drupal"></i>
<i class="fa fa-empire"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-official"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-forumbee"></i>
<i class="fa fa-foursquare"></i>
<i class="fa fa-ge"></i>
<i class="fa fa-git"></i>
<i class="fa fa-git-square"></i>
<i class="fa fa-github"></i>
<i class="fa fa-github-alt"></i>
<i class="fa fa-github-square"></i>
<i class="fa fa-gittip"></i>
<i class="fa fa-google"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-google-plus-square"></i>
<i class="fa fa-google-wallet"></i>
<i class="fa fa-hacker-news"></i>
<i class="fa fa-html5"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-ioxhost"></i>
<i class="fa fa-joomla"></i>
<i class="fa fa-jsfiddle"></i>
<i class="fa fa-lastfm"></i>
<i class="fa fa-lastfm-square"></i>
<i class="fa fa-leanpub"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-linkedin-square"></i>
<i class="fa fa-linux"></i>
<i class="fa fa-maxcdn"></i>
<i class="fa fa-meanpath"></i>
<i class="fa fa-medium"></i>
<i class="fa fa-openid"></i>
<i class="fa fa-pagelines"></i>
<i class="fa fa-paypal"></i>
<i class="fa fa-pied-piper"></i>
<i class="fa fa-pied-piper-alt"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-pinterest-p"></i>
<i class="fa fa-pinterest-square"></i>
<i class="fa fa-qq"></i>
<i class="fa fa-ra"></i>
<i class="fa fa-rebel"></i>
<i class="fa fa-reddit"></i>
<i class="fa fa-reddit-square"></i>
<i class="fa fa-renren"></i>
<i class="fa fa-sellsy"></i>
<i class="fa fa-share-alt"></i>
<i class="fa fa-share-alt-square"></i>
<i class="fa fa-shirtsinbulk"></i>
<i class="fa fa-simplybuilt"></i>
<i class="fa fa-skyatlas"></i>
<i class="fa fa-skype"></i>
<i class="fa fa-slack"></i>
<i class="fa fa-slideshare"></i>
<i class="fa fa-soundcloud"></i>
<i class="fa fa-spotify"></i>
<i class="fa fa-stack-exchange"></i>
<i class="fa fa-stack-overflow"></i>
<i class="fa fa-steam"></i>
<i class="fa fa-steam-square"></i>
<i class="fa fa-stumbleupon"></i>
<i class="fa fa-stumbleupon-circle"></i>
<i class="fa fa-tencent-weibo"></i>
<i class="fa fa-trello"></i>
<i class="fa fa-tumblr"></i>
<i class="fa fa-tumblr-square"></i>
<i class="fa fa-twitch"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-viacoin"></i>
<i class="fa fa-vimeo-square"></i>
<i class="fa fa-vine"></i>
<i class="fa fa-vk"></i>
<i class="fa fa-wechat"></i>
<i class="fa fa-weibo"></i>
<i class="fa fa-weixin"></i>
<i class="fa fa-windows"></i>
<i class="fa fa-wordpress"></i>
<i class="fa fa-xing"></i>
<i class="fa fa-xing-square"></i>
<i class="fa fa-yahoo"></i>
<i class="fa fa-yelp"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-youtube-square"></i>

CSS.fa.fa-adn {
  color: #4a484c;
}
.fa.fa-android {
  color: #a4c639;
}
.fa.fa-angellist {
  color: #000000;
}
.fa.fa-apple {
  color: #979797;
}
.fa.fa-behance {
  color: #1769ff;
}
.fa.fa-behance-square {
  color: #1769ff;
}
.fa.fa-bitbucket {
  color: #205081;
}
.fa.fa-bitbucket-square {
  color: #205081;
}
.fa.fa-bitcoin {
  color: #ee9209;
}
.fa.fa-btc {
  color: #ee9209;
}
.fa.fa-buysellads {
  color: #c90100;
}
.fa.fa-cc-amex {
  color: #007bc1;
}
.fa.fa-cc-discover {
  color: #f68121;
}
.fa.fa-cc-mastercard {
  color: #0a3a82;
}
.fa.fa-cc-paypal {
  color: #253b80;
}
.fa.fa-cc-stripe {
  color: #00afe1;
}
.fa.fa-cc-visa {
  color: #0157a2;
}
.fa.fa-codepen {
  color: #000000;
}
.fa.fa-connectdevelop {
  color: #391448;
}
.fa.fa-css3 {
  color: #1680c0;
}
.fa.fa-dashcube {
  color: #7f7f7f;
}
.fa.fa-delicious {
  color: #3399ff;
}
.fa.fa-deviantart {
  color: #4e6252;
}
.fa.fa-digg {
  color: #000000;
}
.fa.fa-dribbble {
  color: #444444;
}
.fa.fa-dropbox {
  color: #007ee5;
}
.fa.fa-drupal {
  color: #0077c0;
}
.fa.fa-empire {
  color: #000000;
}
.fa.fa-facebook {
  color: #3b5998;
}
.fa.fa-facebook-official {
  color: #3b5998;
}
.fa.fa-facebook-square {
  color: #3b5998;
}
.fa.fa-flickr {
  color: #ff0084;
}
.fa.fa-forumbee {
  color: #83ad13;
}
.fa.fa-foursquare {
  color: #0072b1;
}
.fa.fa-ge {
  color: #000000;
}
.fa.fa-git {
  color: #333333;
}
.fa.fa-git-square {
  color: #333333;
}
.fa.fa-github {
  color: #333333;
}
.fa.fa-github-alt {
  color: #333333;
}
.fa.fa-github-square {
  color: #333333;
}
.fa.fa-gittip {
  color: #663300;
}
.fa.fa-google {
  color: #4285f4;
}
.fa.fa-google-plus {
  color: #dd4b39;
}
.fa.fa-google-plus-square {
  color: #dd4b39;
}
.fa.fa-google-wallet {
  color: #4285f4;
}
.fa.fa-hacker-news {
  color: #ff6600;
}
.fa.fa-html5 {
  color: #e34f26;
}
.fa.fa-instagram {
  color: #3f729b;
}
.fa.fa-ioxhost {
  color: #faa729;
}
.fa.fa-joomla {
  color: #142849;
}
.fa.fa-jsfiddle {
  color: #4679bd;
}
.fa.fa-lastfm {
  color: #c3000d;
}
.fa.fa-lastfm-square {
  color: #c3000d;
}
.fa.fa-leanpub {
  color: #0c0c0c;
}
.fa.fa-linkedin {
  color: #0976b4;
}
.fa.fa-linkedin-square {
  color: #0976b4;
}
.fa.fa-linux {
  color: #333333;
}
.fa.fa-maxcdn {
  color: #ff6600;
}
.fa.fa-meanpath {
  color: #538ed7;
}
.fa.fa-medium {
  color: #000000;
}
.fa.fa-openid {
  color: #f78c40;
}
.fa.fa-pagelines {
  color: #000000;
}
.fa.fa-paypal {
  color: #253b80;
}
.fa.fa-pied-piper {
  color: #2f9f46;
}
.fa.fa-pied-piper-alt {
  color: #2f9f46;
}
.fa.fa-pied-piper-square {
  color: #2f9f46;
}
.fa.fa-pinterest {
  color: #cc2127;
}
.fa.fa-pinterest-p {
  color: #cc2127;
}
.fa.fa-pinterest-square {
  color: #cc2127;
}
.fa.fa-qq {
  color: #000000;
}
.fa.fa-ra {
  color: #000000;
}
.fa.fa-rebel {
  color: #000000;
}
.fa.fa-reddit {
  color: #ff4500;
}
.fa.fa-reddit-square {
  color: #ff4500;
}
.fa.fa-renren {
  color: #005eac;
}
.fa.fa-sellsy {
  color: #1f78b9;
}
.fa.fa-share-alt {
  color: #01bf01;
}
.fa.fa-share-alt-square {
  color: #01bf01;
}
.fa.fa-shirtsinbulk {
  color: #dd3a26;
}
.fa.fa-simplybuilt {
  color: #000000;
}
.fa.fa-skyatlas {
  color: #00adbb;
}
.fa.fa-skype {
  color: #00aff0;
}
.fa.fa-slack {
  color: #0f7965;
}
.fa.fa-slideshare {
  color: #e98325;
}
.fa.fa-soundcloud {
  color: #ff8800;
}
.fa.fa-spotify {
  color: #7ab800;
}
.fa.fa-stack-exchange {
  color: #000000;
}
.fa.fa-stack-overflow {
  color: #fe7a15;
}
.fa.fa-steam {
  color: #0b0b0b;
}
.fa.fa-steam-square {
  color: #0b0b0b;
}
.fa.fa-stumbleupon {
  color: #eb4924;
}
.fa.fa-stumbleupon-circle {
  color: #eb4924;
}
.fa.fa-tencent-weibo {
  color: #74af2c;
}
.fa.fa-trello {
  color: #256a92;
}
.fa.fa-tumblr {
  color: #35465c;
}
.fa.fa-tumblr-square {
  color: #35465c;
}
.fa.fa-twitch {
  color: #6441a5;
}
.fa.fa-twitter {
  color: #55acee;
}
.fa.fa-twitter-square {
  color: #55acee;
}
.fa.fa-viacoin {
  color: #333333;
}
.fa.fa-vimeo-square {
  color: #162221;
}
.fa.fa-vine {
  color: #00b488;
}
.fa.fa-vk {
  color: #45668e;
}
.fa.fa-wechat {
  color: #93d034;
}
.fa.fa-weibo {
  color: #e71d34;
}
.fa.fa-weixin {
  color: #93d034;
}
.fa.fa-windows {
  color: #00bcf2;
}
.fa.fa-wordpress {
  color: #21759b;
}
.fa.fa-xing {
  color: #026466;
}
.fa.fa-xing-square {
  color: #026466;
}
.fa.fa-yahoo {
  color: #400191;
}
.fa.fa-yelp {
  color: #af0606;
}
.fa.fa-youtube {
  color: #e52d27;
}
.fa.fa-youtube-play {
  color: #e52d27;
}
.fa.fa-youtube-square {
  color: #e52d27;
}

Coba perhatikan CSS diatas setiap class font awesome diberi atribute color yang berbeda. Jadi jika anda ingin membuat font awesome di blog atau web, sobat cukup color sesuai keinginan.

View Demo

Itulah sedikit Artikel Font Awesome Icons Dengan Variabel Merek Warna terbaru dari kami

Semoga artikel Font Awesome Icons Dengan Variabel Merek Warna 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 Font Awesome Icons Dengan Variabel Merek Warna