Cara Menggunakan Syimbol atau Glyphicons di Bootstrap
Syimbol atau gambar kecil yang berada di sebuah laman itu betul-betul sering sekali kita temui di website-website lalu gunannya bagi apa, nanti kita akan bahas, dan apa bedanya syimbol dan Glyphicons hakekatnya mirip, tapi biasanya orang lebih mengenalnya atau biasanya menyebutnya syimbol karenanya dari itu saya membangun judul dengan nama cara menggunakan syimbol atau glyphicons di bootstrap, supaya gampang di cari, oke karenanya 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 laman misal seperti tampilan CMS wordpress yang lagi saya gunakan bagi menulis ini, terdapat banyak simbol-simbol di menunya, nanti akan saya perlihatkan contohnya.
akan tetapi karena di sini kita akan mencoba membuatnya dengan glypicons dimana bootstrap telah ada syimbol yang telah di gunakan, disini saya harap teman-teman telah dapat cara menggunakannya bootstrap ya dari unduh bootstrap terlebih dahulu versi yang saya gunakan masih 3.7 ya teman-teman, jadi supaya kita seketika masuk contoh pembuatannya saja, oke seketika saja teman-teman buka terlebih dahulu get boostrapnya. teman-teman pilih components ya, pilih fitur di samping kanan glyphicons, seperti gambar berikut ini:
Yang saya beri kotak merah itu ialah macam-macam symbol yang berada di bootstrap, teman-teman tinggal pilih saja sesuai keperluan, 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 laman 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 aplikasi like Aldus PageMaker including versions of Lorem Ipsum. </p>
<a href=https://play.google.com/store/apps/details?id=com.mobile.legends>link unduh</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 begitulah cara membangun glyphicon, saya membangun jenis 2 icon, pehatikan setelah value glyphicon terdapat kata kunci glyphicon mana yang ingin saya gunakan betul ya, oke bagaimana hasilnya:
Oke saya rasa lumayan gampang ya teman-teman bagi belajar cara menggunakan syimbol atau glyphicons di bootstrap, semoga bermanfaat dan hingga jumpa di artikel selanjtunnya terimakasih.
Sumber https://kursuswebsite.org
