Cara Membuat Icon Flat Ui Menggunakan CSS

Cara Membuat Icon Flat Ui Menggunakan CSS

Icon yang biasa digunakan pada blog biasanya berbentuk gambar, baik itu dengan format jpg atau png. Tapi sadarkah Anda kalau hal tersebuh hanya akan membuat blog menjadi lebih berat, sehingga tidak fast loading. Oleh karena itu, banyak mastah blogger yang lebih memilih menggunakan font Awesome. Selain tidak mempengaruhi loading pada blog, icon font awesome juga sangat banyak dan mudah dalam pemakaiannya.

Kali ini saya akan memberikan tutorial untuk membuat icon flat ui dengan menggunakan CSS yang digabungkan dengan Font Awesome. Untuk Demo tampilannya bisa dilihat langsung di akhir post. Bila Anda tertarik, silahkan simak tutorial berikut.

Cara Membuat Icon Flat Ui Menggunakan CSS dan Font Awesome

1. Pertama, Font Awesome harus sudah terpasang di blog Anda. Bila belum, silahkan pasang font awesome dengan cara meletakkan kode di bawah ini tepat sebelum kode </head> pada Edit Template.

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Buatlah CSS untuk desain icon flat ui. Saya akan membuat CSS untuk icon facebook dengan desain flat ui. Anda dapat meletakkan CSS tersebut sebelum kode ]]></b:skin> atau </style> pada Edit Template.

.opickweblog-social-icon{padding:0;list-style:none;display:inline-block;margin:10px auto}.opickweblog-social-icon li{display:inline-block}.opickweblog-social-icon a{display:inline-block;float:left;width:32px;height:32px;font-size:20px;color:#FFF;text-decoration:none;cursor:pointer;text-align:center;line-height:32px;background:#000;position:relative;transition:.5s}.long-shadow a{overflow:hidden;font-size:20px;border-radius:4px;margin:0 5px}.long-shadow a:hover{background:#fff;text-shadow:0 0 #d4d4d4,1px 1px #d4d4d4,2px 2px #d4d4d4,3px 3px #d4d4d4,4px 4px #d4d4d4,5px 5px #d4d4d4,6px 6px #d4d4d4,7px 7px #d4d4d4,8px 8px #d4d4d4,9px 9px #d4d4d4,10px 10px #d4d4d4,11px 11px #d4d4d4,12px 12px #d4d4d4,13px 13px #d4d4d4,14px 14px #d4d4d4,15px 15px #d4d4d4,16px 16px #d4d4d4,17px 17px #d4d4d4,18px 18px #d4d4d4,19px 19px #d4d4d4,20px 20px #d4d4d4,21px 21px #d4d4d4,22px 22px #d4d4d4,23px 23px #d4d4d4,24px 24px #d4d4d4,25px 25px #d4d4d4,26px 26px #d4d4d4,27px 27px #d4d4d4,28px 28px #d4d4d4,29px 29px #d4d4d4,30px 30px #d4d4d4}.long-shadow .facebook{border:2px solid transparent;background:#3B579D;text-shadow:0 0 #2d4278,1px 1px #2d4278,2px 2px #2d4278,3px 3px #2d4278,4px 4px #2d4278,5px 5px #2d4278,6px 6px #2d4278,7px 7px #2d4278,8px 8px #2d4278,9px 9px #2d4278,10px 10px #2d4278,11px 11px #2d4278,12px 12px #2d4278,13px 13px #2d4278,14px 14px #2d4278,15px 15px #2d4278,16px 16px #2d4278,17px 17px #2d4278,18px 18px #2d4278,19px 19px #2d4278,20px 20px #2d4278,21px 21px #2d4278,22px 22px #2d4278,23px 23px #2d4278,24px 24px #2d4278,25px 25px #2d4278,26px 26px #2d4278,27px 27px #2d4278,28px 28px #2d4278,29px 29px #2d4278,30px 30px #2d4278}.long-shadow .facebook:hover{border:2px solid #d4d4d4;color:#3B579D}

Keterangan :

kode #3b579d adalah warna background nya,
Kode #2d4278 adalah warna shadow nya.
Silahkan lihat kode warna yang Anda inginkan disini

3. Sekarang letakkan kode pemanggil CSS tadi. Kode ini dapat Anda letakkan di postingan, atau di template sobat.

<div class="opickweblog-social-icon long-shadow">
<a class="facebook" href="https://www.facebook.com/opickweblog" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a>
</div>

Keterangan :

1. kode <i class="fa fa-facebook"></i> merupakan font awesome yang digunakan. Anda dapat melihat daftar Font Awesome disini
2. Silahkan ganti https://www.facebook.com/opickweblog dengan alamat facebook sobat.

Demo Icon Flat Ui From CSS

Anda dapat berkreasi sendiri dengan mengedit CSS dan kode pemanggilnya. Berikut hasil dari CSS icon font awesome yang dibuat tadi.

Bagikan Artikel ini