Harga Jual / Beli Bitcoin

Font Awesome Icons Dengan Variabel Merek Warna

04:11:00 Wahab Saputra 0 Comments

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.

Font Awesome Icons Dengan Variabel Merek Warna


Perhatikan contoh penerapannya di bawah ini :

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



.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


0 komentar:

Jangan titip link.....saya pasti berkunjung balik....
Beri tahu saya di kotak komentar kalau sobat sudah Follow Blog ini, agar saya bisa segera Folback dan tidak ketinggalan Update artikel dari blog sobat...!!!