Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 13 : Membuat Icon dengan CSS

By Web Design Purbalingga Post a Comment
Membuat Icon dengan CSS – Icon biasanya digunakan sebagai pengganti tulisan pada menu atau navigasi sebuah web. Misalnya yang dulunya menu (tulisan) beranda atau home sekarang diganti dengan icon berbentuk rumah dan lain sebagainya. Nah, pada bahasan kali ini kita mencoba menambahkan icon dengan css.

Membuat Icon dengan CSS

Untuk menggunakan fungsi icon pada web kita, dibutuhkan penyedia icon itu sendiri dari pihak lain. Di sini kita akan gunakan penyedia icon yang paling sering digunakan untuk menambahkan beberapa icon pada web mereka. Langsung saja, tambahkan baris link di bawah ini tepat di bawah kode <title> (yang paling penting masih di dalam tag <head>)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Berikutnya adalah membuat lokasi di mana icon tersebut akan disisipkan, pada contoh kali ini saya membuat menu navigasi yang kemudian nanti akan di tambahkan beberapa icon. Tulis baris kode di bawah ini tepat di bawah tag <body>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="navigasi">
   <a href="">Home</a>
   <a href="">HTML</a>
   <a href="">CSS</a>
   <a href="">Javascript</a>
   <a href="">PHP</a>
 </div>
</body>
</html>
Dan tambahkan kode css nya seperti di bawah ini
.navigasi {
   border: 1px solid teal;
   width: 100%;
   background-color: #07F7ADFF;
   border-radius: 3px;
   font-size: 15px;
 }
a {
 text-decoration: none;
 }
Hasilnya akan seperti ini


Penjelasan
- Di bawah tag <title> ada link referensi untuk penyedia iconnya
- Di bawah tag <body> ada div yang mempuanya class navigasi untuk mendefinisikan bahwa elemen yang ada di dalamnya akan dibuat navigasi.
- Tag link <a> sebagai menunya
- Pada kode css ada text-decoration untuk menghilangkan garis bawah pada link (sudah di bahas pada materi menghias link)
Selanjutnya adalah kita akan memanggil penyedia icon untuk memberikan ke web kita icon yang di inginkan. Misalnya, menu Home pada menu navigasi di atas diganti menjadi icon berbentuk rumah maka menu link Home di atas tambahkan class iconnya seperti baris kode di bawah ini
<a href="#" class="fa fa-home"></a>
Lalu, tambahkan lagi icon user dan kontak dengan menambahkan baris kode di bawah ini tepat di akhir menu PHP
<a href="#" class="fa fa-user"></a>
  <a href="#" class="fa fa-envelope-o"></a>
Dan hasilnya akan seperti ini


Penjelasan
- class fa fa- adalah kode untuk memanggil si penyedia iconnya
- home, user dan envelope adalah nama iconnya. Jadi saat kalian ingin mengganti iconnya, silahkan ganti nama iconnya dengan icon yang didinginkan. Kalian bisa ke SINI untuk melihat icon - icon menarik lainnya.
Baiklah, sekian materi tentang Membuat Icon dengan CSS kali ini. Jika ada yang belum di pahami, silahkan tinggalkan pertanyaan di kolom komentar di bawah ini.

Post a Comment for "Materi 13 : Membuat Icon dengan CSS"