Cara Menciptakan Icon Flat Ui Memakai Css

Cara Membuat Icon Flat Ui Menggunakan CSS

Icon yang biasa dipakai pada blog biasanya berbentuk gambar, baik itu dengan format jpg atau png. Tapi sadarkah Anda jika hal tersebuh hanya akan menciptakan blog menjadi lebih berat, sehingga tidak fast loading. Oleh alasannya itu, banyak mastah blogger yang lebih menentukan memakai font Awesome. Selain tidak mempengaruhi loading pada blog, icon font awesome juga sangat banyak dan gampang dalam pemakaiannya.

Kali ini aku akan memperlihatkan tutorial untuk menciptakan icon flat ui dengan memakai CSS yang digabungkan dengan Font Awesome. Untuk Demo tampilannya sanggup dilihat eksklusif di selesai 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 isyarat di bawah ini sempurna sebelum isyarat </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 menciptakan CSS untuk icon facebook dengan desain flat ui. Anda sanggup meletakkan CSS tersebut sebelum isyarat ]]></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 ialah warna background nya,
Kode #2d4278 ialah warna shadow nya.
Silahkan lihat isyarat warna yang Anda inginkan disini

3. Sekarang letakkan isyarat pemanggil CSS tadi. Kode ini sanggup 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. isyarat <i class="fa fa-facebook"></i> merupakan font awesome yang digunakan. Anda sanggup melihat daftar Font Awesome disini
2. Silahkan ganti https://www.facebook.com/opickweblog dengan alamat facebook sobat.

Demo Icon Flat Ui From CSS

Anda sanggup berkreasi sendiri dengan mengedit CSS dan isyarat pemanggilnya. Berikut hasil dari CSS icon font awesome yang dibentuk tadi.