Tutorial CSS3 Ikon Tanpa Gambar Dengan Font Entypo
|Setelah kemarin saya memposting tentang Penggunaan Font Entypo gratis yang bisa anda download dan gunakan untuk membangun ornament ikon website tanpa menggunakan gambar, cukup menggunakan font CSS3 ikon kit ini anda dengan mudah memberi ornamen yang cantik dengan cepat ke website anda. Dan postingan kali ini saya akan memberikan contoh dalam penggunaan Font Entypo ini.
Langkahnya sebagi berikut:
Download terlebih dahulu Font Entypo disini. Dan ambil File Font ke Folder Anda termasuk eot., Svg, ttf. Dan WOFF. Selanjutnya dalam folder Anda dan buat File css, pilih gaya @ font-face dan copy paste.
Membuat Icon
Dalam File CSS Anda copy dan paste @ font-face dibawah ini ke dalam css anda. Ini akan membuat font untuk ikon berubah ke Entypo font.
@font-face { font-family: 'entyporegular'; src: url('Entypo-webfont.eot'); src: url('Entypo-webfont.eot?#iefix') format('embedded-opentype'), url('Entypo-webfont.woff') format('woff'), url('Entypo-webfont.ttf') format('truetype'), url('Entypo-webfont.svg#entyporegular') format('svg'); font-weight: normal; font-style: normal; }
Kemudian tambahkan lagi kode CSS berikut ini, Kode css ini adalah pembuatan kelas dengan nama test untuk di panggil di script html anda, dan terlihat untuk memanggil font entypo ini adalah dengan Font-family:’entyporegular’;
.test { /*General*/ display: block; text-decoration: none; /*Font*/ font-family: 'entyporegular'; text-align: center; font-size:50px; line-height:1.4; font-weight:regular; color: white; /*Background*/ background-color: #4ed18f; width:70px; height:70px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:5px; } /*After Select */ .test:after { content: "G"; }
Untuk Script HTML untuk memanggil kelas css ikon ini sebagai berikut
<a href="#" class="test" title="Icon 1"></a>
anda juga dapat mencoba melakukan test drive untuk melihat jenis ikon yang disediakan di Font entypo ini disini.
Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.
Register Now: TOP 10 Hosting
Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals