Menggunakan Font Awesome untuk Website atau Blog
Hallo sahabat Sintaker...
Kali ini saya ingin membagikan sebuah artikel mengenai dunia design website dan blog. Nah, disini saya ingin membahas Font Awesome, Apa sih itu Font Awesome ?
Kali ini saya ingin membagikan sebuah artikel mengenai dunia design website dan blog. Nah, disini saya ingin membahas Font Awesome, Apa sih itu Font Awesome ?
Font Awesome adalah sebuah plugin css untuk menampilkan sebuah icon yang banyaknya ratusan bahkan icon tersebut memiliki banyak pilihan tentunya dan cara penggunaannya pun cukup mudah.
Disini saya menggunakan contoh yaitu pada website. Untuk Contoh penggunaannya anda bisa lihat dibawah ini :
Jika anda penguna online maka gunakan link berikut dan anda copas ke text editor anda :
Sebelum anda menampilkan Font Icon ke dalam situs anda, pastikan anda sudah mempunya source code nya. Jika belum, anda dapat download dengan cara klik link dibawah ini.
Download
Download
Disini saya menggunakan contoh yaitu pada website. Untuk Contoh penggunaannya anda bisa lihat dibawah ini :
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Jika anda sedang offline maka anda harus memanggil style css nya dengan cara berikut , sesuai dengan tempat folder anda :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Menggunakan Font Awesome untuk Website atau Blog</title> <link href='lokasi-folder/css/font-awesome.min.css' rel='stylesheet'/> </head> <body> </body> </html>
Sekarang anda langsung copas kode dari website font awesome untuk menampilkan icon pada situs anda. Klik link di bawah ini untuk menuju ke halaman font-awesome :
http://fontawesome.io/icons/
Maka akan muncul halaman seperti berikut :
Nah jika sudah muncul maka langsung saja pilih icon mana yang ingin anda gunakan untuk ditampilkan untuk di blog atau website anda. Caranya dengan klik icon mana yang anda inginkan. Jika sudah pilih maka akan muncul halaman seperti ini :
Pada gambar di atas terdapat kotak berwarna merah, nah itu anda copy dan paste di text editor anda. Seperti contoh sintak dibawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Menggunakan Font Awesome untuk Website atau Blog</title>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style type="text/css">
*{
text-align: center;
}
body{
margin-top: 15em;
}
button{
padding: 20px 30px;
background: #22D195;
color: white;
font-size: 25px;
text-align: center;
border-radius: 3px;
border: 1px solid #22D195;
cursor: pointer;
}
</style>
</head>
<body>
<button>
<!-- letakan icon yang tadi sudah di copy disini -->
<i class="fa fa-grav" aria-hidden="true"></i> Click Me
</button>
</body>
</html>
Langkah berikutnya save dan lihat hasilnya. Seperti berikut ini :
Sekian untuk tips dari saya untuk sahabar sintaker semuanya , jika ada hal yang kurang paham atau ingin ditanyakan silahkan anda memberikan kometar di bawah. Terima Kasih dan Salam Coder.
No comments: