Syimbol atau gambar kecil yang berada di sebuah website itu sangat sering sekali kita temui di website-website lalu gunannya untuk apa, nanti kita akan bahas, dan apa bedanya syimbol dan Glyphicons sebenarnya mirip, tapi biasanya orang lebih mengenalnya atau biasa menyebutnya syimbol maka dari itu saya membuat judul dengan nama cara menggunakan syimbol atau glyphicons di bootstrap, supaya mudah di cari, oke maka dari itu kita akan bahas di paragraf berikutnya, simak terus ya teman-teman.
Oke cara menggunakan syimbol atau glyphicons di bootstrap, berfungsi memberikan tanda dan lebih mempercantik sebuah halaman website misal seperti tampilan CMS wordpress yang lagi saya gunakan untuk menulis ini, terdapat banyak simbol-simbol di menunya, nanti akan saya perlihatkan contohnya.
Tapi karena di sini kita akan mencoba membuatnya dengan glypicons dimana bootstrap sudah ada syimbol yang sudah di pakai, disini saya harap teman-teman sudah bisa cara menggunakannya bootstrap ya dari download bootstrap terlebih dahulu versi yang saya pakai masih 3.7 ya teman-teman, jadi supaya kita langsung masuk contoh pembuatannya saja, oke langsung saja teman-teman buka terlebih dahulu get boostrapnya. teman-teman pilih components ya, pilih menu di samping kanan glyphicons, seperti gambar berikut ini:
Yang saya beri kotak merah itu adalah macam-macam symbol yang berada di bootstrap, teman-teman tinggal pilih saja sesuai kebutuhan, bagaimana cara menerapkannya perhatikan struktur html css berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>cara menggunakan syimbol atau glyphicons di bootstrap</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<-e-script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"><-e-/script>
<-e-script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"><-e-/script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<span <span style="color: #ff0000">class="glyphicon glyphicon-search" aria-hidden="true"></span></span><h1>cara merubah font website dengan google font</h1>
<span <span style="color: #ff0000">class="glyphicon glyphicon-knight" aria-hidden="true"></span></span><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
<a href="https://play.google.com/store/apps/details?id=com.mobile.legends">link download</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<-e-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><-e-/script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<-e-script src="js/bootstrap.min.js"><-e-/script>
</body>
</html>
teman-teman perhatikan yang saya beri tanda merah itulah cara membuat glyphicon, saya membuat jenis 2 icon, pehatikan setelah value glyphicon terdapat kata kunci glyphicon mana yang ingin saya gunakan betul ya, oke bagaimana hasilnya:
Oke saya rasa cukup mudah ya teman-teman untuk belajar cara menggunakan syimbol atau glyphicons di bootstrap, semoga bermanfaat dan sampai jumpa pada artikel selanjtunnya terimakasih.