Font Awesome adalah ikon khusus yang penulisannya pada Web/Blog menggunakan font, sehingga tidak menambah berat beban loading saat dibuka. Beda halnya jika kita menggunakan ikon dengan bentuk image yang harus diupload terlebih dulu dan memasukkan link tersebut pada Web/Blog.
Selain lebih simple, font awesome juga lebih mudah untuk ditambah element lain seperti warna, ukuran tanpa repot-repot membuat ikon baru dengan ukuran dan warna yang berbeda pada tiap-tiap ikon.
Syarat utama untuk menambah font awesome pada Web/Blog adalah harus menambahkan CSS/stylesheet dibawah ini diatas kode </head> pada kerangka template.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Contoh penulisan CSS/stylesheet pada kerangka template Web/Blog seperti dibawah ini.
<html>
<head>
<title>Cara Menambahkan Font Awesome pada Web/Blog</title>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
</head>
<body>
<!--Contect Start-->
<!--Content End-->
</body>
</html>
1. Penulisan font awesome sebagai content pada CSS/style, contoh.
#box:after {
position: absolute;
content: '\f262';}
Contoh lengkap pada HTML seperti dibawah.
<html>
<head>
<title>Cara Menambahkan Font Awesome pada Web/Blog</title>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
</head>
<style>
#box {
position: relative;
width: 93.5%;
height: 150px;
display: block;
background: #f6f6f6;
margin: 0 20px 20px 20px;
}
#box:before {
position: absolute;
content: '';
display: inline-block;
left: 0;
top: 0;
height: 150px;
width: 200px;
margin: 0;
background: #FF9E80;
}
#box:after {
position: absolute;
content: '\f262';
font-family: FontAwesome;
display: inline-block;
left: 0;
right: 0;
top: 0;
text-align: center;
height: 150px;
line-height: 150px;
width: 200px;
margin: 0;
color: #fb5520;
font-size: 50px;
}
</style>
<body>
<div id="box"></div>
</body>
</html>
Pada teks box \f262 adalah kode font awesome tripadvisor.
2. Penulisan font awesome sebagai class pada HTML, contoh.
<i class='fa fa-tripadvisor'/>
Atau seperti ini
<i class='fa fa-tripadvisor'></i>
Contoh lengkap pada HTML seperti dibawah.
<html>
<head>
<title>Cara Menambahkan Font Awesome pada Web/Blog</title>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
</head>
<style>
.fa-tripadvisor {
display: inline-block;
position: absolute;
background:#FF9E80;
font-size: 50px;
color: #fb5520;
height: 40px;
width: 60px;
padding: 70px;
margin-left:20px
}
</style>
<body>
<i class='fa fa-tripadvisor'>Tripadvisor</i>
</body>
</html>
Pada teks box fa fa-tripadvisor adalah kode font awesome tripadvisor.
List font awesome bisa juga lihat disini List Font Awesome
Sampai disini tutorial tentang font awesome, mudah-mudahan bisa diterapkan dengan baik dan terima kasih telah berkunjung di blog sederhana ini.
Saya sebagai penulis siap menerima kritik, keluhan dan juga saran dari anda, kerena dengan begitu berarti keberadaan saya sudah dianggap bagian dari teman-teman semua, terima kasih.
Show Parser Hide Parser