Download Now Download Themes Gratis WordPress Responsive!

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 Google+.

10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

Must Read...!
Download Free Icons Kit CSS3 Font Entypo Keren

Ini salah satu Font yang sangat bagus bisa anda gunakan dalam membangun website anda...

5 Fonts Menakjubkan Untuk Desain Web #3

Menambahkan review 5 Font Lagi bagi para desainer website maupun desainer mobile aplication yang...

Close