How to Start a Blog? Panduan Membuat Website Hanya 30 Menit

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

10 top hosting!

Register Now: TOP 10 Hosting

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

Niagahoster

Rp.26.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

IDCloudhost

Rp.30.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

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

Hostgator

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

Add a Comment

Your email address will not be published. Required fields are marked *