cara menampilkan gambar icon dengan open iconic

Di dalam bootstrap sebenarnya sudah terdapat icon-icon tetapi siapa tau teman-teman mengingikan tampilan icon yang berbeda pada website teman-teman, bootstrap sendiri merekomendasikan open iconic untuk refrensi tambah icon yang teman-teman butuhkan, sebenarnya tidak hanya open iconic saja, ada 3 salah satunya iconic ini, dan kita juga akan membahas tampilan iconic saja terlebih dahulu, oke bagaimana cara menampilkan gambar icon dengan open iconic, simak terus ya teman-teman.

Cara pemanggilannya sangat mudah sekali, seperti kita ingin menampilkan sebuah gambar, pasti teman-teman paham ya, saya anggap teman-teman sudah paham tentang pemanggilan gambar ya, kita langsung masuk aja cara menampilkan gambar icon dengan open iconic, langkah pertama yang harus teman-teman persiapkan adalah:

masuk ke website open-iconic bisa klik disini.
nanti teman-teman akan langsung masuk websitenya dan disitu terdapat icon-icon yang tersedia, teman-teman tinggal pilih saja.
lalu untuk menggunakannya teman-teman harus mendownload terlebih dahulu ya, silahkan download dulu, nanti akan ada folder svg yang nanti kita akan gunakan.

Oke sekarang saya akan langsung masuk contoh pembuatannya, saya masih menggunakan tempalte bootstrap yang kemarin ya, paling saya akan mengcopy folder svg dan sprite di dalam template bootstrap kita. Karena disini saya akan menggunakan file yang tersedia pada folder svg tersebut. Oke seperti inilah cara memanggilnya.

<!doctype html>
<html lang="en">
  <head>
    <title>Cara Menampilkan Gambar Icon dengan Open Iconic</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <-e-style>
		  body {
		    font-family: 'Helvetica', sans-serif;
		    margin: 50px 0;
		  }

		  .container {
		    width: 600px;
		    text-align: center;
		    margin: 20px auto;
		  }

		  .intro {
		    text-align: left;
		  }

		  .icon {

		    margin: 10px;
		    width: 100px;
		    height: 100px;
		  }
		-e-<-e-/style>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
  	<div class="container">
    <h1 class='intro'>
    Cara Menampilkan Gambar Icon dengan Open Iconic
	</h1>
	  <svg class="icon">
	    <use xlink:href="sprite/open-iconic.svg#account-login"></use>
	  </svg>

	  <svg viewBox="0 0 8 8" class="icon">
	    <use xlink:href="sprite/open-iconic.svg#account-logout"></use>
	  </svg>

	  <svg viewBox="0 0 8 8" class="icon">
	    <use xlink:href="sprite/open-iconic.svg#action-redo"></use>
	  </svg>

	  <svg viewBox="0 0 8 8" class="icon">
	    <use xlink:href="sprite/open-iconic.svg#action-undo"></use>
	  </svg>

	  <svg viewBox="0 0 8 8" class="icon">
	    <use xlink:href="sprite/open-iconic.svg#align-center"></use>
	  </svg>

	  <svg viewBox="0 0 8 8" class="icon">
	    <use xlink:href="sprite/open-iconic.svg#align-left"></use>
	  </svg>

	  <svg viewBox="0 0 8 8" class="icon">
	    <use xlink:href="sprite/open-iconic.svg#align-right"></use>
	  </svg>

	  <svg viewBox="0 0 8 8" class="icon">
	    <use xlink:href="sprite/open-iconic.svg#aperture"></use>
	  </svg>

	  <svg viewBox="0 0 8 8" class="icon">
	    <use xlink:href="sprite/open-iconic.svg#arrow-bottom"></use>
	  </svg>

	  <svg viewBox="0 0 8 8" class="icon">
	    <use xlink:href="sprite/open-iconic.svg#arrow-circle-bottom"></use>
	  </svg>
	</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <-e-script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <-e-script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <-e-script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>-e-

Saya hanya memanggil beberapa icon saja ya teman-teman, dan coba teman-teman perhatikan tag svg ya, terdapat atribut viewbox, dan lain-lain, oke bagaimana hasilnya:

sengaja saya berikan iconnya dengan width yang agak lebar, supaya terlihat, oke dan saya rasa cukup sampai disini dulu belajar kita tentang cara menampilkan gambar icon dengan open iconic, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Menampilkan Gambar Icon dengan Open Iconic

Kategori