Cara membuat icon pada navbar responsive dengan bootstrap



Navbar adalah salah satu yang harus ada dalam website karena pada navbar tersebut selain menjadikan menu informasi lebih terstruktur, navbar juga bisa memudahkan si pengunjung website untuk mencari informasi menurut kategorinya. Pada kesempatan kali ini saya akan sharing masih ada kaitannya dengan navbar namun kali ini saya hanya sedikit menambahkan pada navbar dengan membuat icon pada navbar responsive dengan bootstrap.

Mungkin icon navbar ini tidak berpengaruh besar pada website. Namun jangan berfikir bahwa tampilan icon di navbar website tidak ada gunannya. Siapa yang tak mau websitenya dikunjungi banyak pengunjung. Dalam usaha memperbanyak pengunjung pada website anda, anda melakukan berbagai macam cara agar website anda tak hanya dikunjungi tapi juga agar sipengunjung betah berlama-lama diwebsite anda. Mungkin salah satu usaha dalam memperbanyak pengunjung adalah membuat tampilan website secantik mungkin. Nah, disinilah peranan icon navbar, icon pada navbar fungsinya agar mempercantik tampilan pada website anda.

Ya udah cukup nga bla-bla nya karena saya bukan tipe orang yang banyak bicara hehe, maka dari itu sebaiknya kita langsung saja pada inti pembahasan pada postingan saya kali ini tentang cara membuat icon pada navbar responsive dengan bootstrap.

Silahkan anda download dulu file bootstrap nya terlebih dahulu kemudian anda membuat folder dengan nama icon_navbar kemudian letakan file bootstrap yang tadi di download ke folder tersebut. Kemudian extract file bootstrap tersebut.

kemudian silahkan anda aplikasi text editor anda, kemudian silahkan anda buat rancangan script html awal, lalu panggil file bootstrap tersebut. Untuk penjelasan yang lebih spesifik tentang bagaimana cara memanggil file bootstrap, anda bisa membaca pada postingan saya sebelumnya disini.



Selanjutnya ketikan script dibawah ini di text editor anda.


<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Utama Admin</title>
    <link rel="stylesheet" type="text/css" href="../../bootstrap/css/bootstrap.min.css"> 
 </head>
<nav class="navbar-inverse">
<body> 
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active-link"><a href="#"><font class="link-nav"><span class="glyphicon glyphicon-home"></span> Branda</font></a></li>
<li><a href="#"><font class="link-nav"><span class="glyphicon glyphicon-th"></span> Tampilkan Data</font></a></li>
<li><a href="kontak.php"><font class="link-nav"><span class="glyphicon glyphicon-phone"></span> Info Kontak</font></a></li>
<li><a href="#"><font class="link-nav"><span class="glyphicon glyphicon-user"></span> Data Security</font></a></li>
<li><a href="#"><font class="link-nav"><span class="glyphicon glyphicon-off"></span> Keluar</font></a></li>
</ul>
</div>
</nav>
</html>
</body>

Untuk tulisan yang berwana merah itu adalah link untuk memanggil file bootstrap sedangkan untuk tulisan yang berwarna biru itu untuk memanggil icon pada file bootstrap.

Silahkan anda jalankan pada web browser anda. Oh, iya kalau dilaptop saya agar icon navbar nya benar-benar tampil pada web browser, saya harus memakai localhost saat menjalankan script tersebut di web browser.

Jika anda menyukai artikel Cara membuat icon pada navbar responsive dengan bootstrap ini, mohon kiranya untuk meluangkan waktu agar bisa membagikan artikel ini kepada temen temen yang lain yang mungkin membutuhkan informasi ini, agar mereka bisa membaca dan mengetahui artikel ini,

Agar tidak ketinggalan update, atau tidak ketinggalan artikel-artikel lainya yang lebih baru, silahkan berlangganan dengan cara memasukan email aktif pada kolom yang sudah disediakan dibawah,



Lisensi Creative Commons. DMCA.com Protection Status

Aktifkan Pemberitahuan GRATIS Via Email, Agar kamu tidak ketinggalan update artikel terbaru dari kami, Masukan email anda dibawah ini, dan klik berlangganan:

Setelah Klik Tombol Berlangganan Silahkan Periksa Email kamu, dan Klik Link Validasi yang dikirim

Bagikan dengan link pendek : GOO.GL
Bagikan artikel ini :
+
0 Komentar untuk "Cara membuat icon pada navbar responsive dengan bootstrap"

Silahkan berikan komentar yang baik, Komentar anda adalah masukan yang sangat berharga bagi saya, Jika mau request silahkan tuliskan juga dikolom komentar ya kawan,

Dilarang Komentar
1. Promosi Jenis Apapun
2. Dilarang bully
3. Dilarang Spam
4. Dilarang Pasang Link Aktif,
5. Tidak sesuai dengan topik yang dibahas

Pelanggaran mengakibatkan komentar kamu akan dihapus tanpa pemberitahuan..!!

By : Admin Tutorapk.com

 
CopyrightCopyright © 2017 - 2018 Tutorapk.com