Cara Menampilkan Gambar Icon dengan Open Iconic
Di pada bootstrap sesungguhnya telah terdapat icon-icon tetapi siapa tau teman-teman mengingikan tampilan icon yang berbeda di situs teman-teman, bootstrap sendiri merekomendasikan open iconic bagi refrensi tambah icon yang teman-teman butuhkan, sesungguhnya tak hanya open iconic saja, ada 3 salah satunya iconic ini, dan kita pun akan membahas tampilan iconic saja terlebih dahulu, oke bagaimana cara menampilkan gambar icon dengan open iconic, simak terus ya teman-teman.
Cara pemanggilannya amat gampang sekali, seperti kita ingin menampilkan sebuah gambar, pasti teman-teman paham ya, saya anggap teman-teman telah paham mengenai pemanggilan gambar ya, kita seketika masuk aja cara menampilkan gambar icon dengan open iconic, langkah pertama-tama yang mesti teman-teman persiapkan yaitu:
- masuk ke situs open-iconic dapat klik disini.
- nanti teman-teman akan seketika masuk websitenya dan disitu terdapat icon-icon yang terdapat, teman-teman tinggal pilih saja.
- lalu bagi menggunakannya teman-teman mesti mengunduh terlebih dahulu ya, silahkan unduh dulu, nanti akan ada folder svg yang nanti kita akan gunakan.
Oke sekarang ini saya akan seketika masuk contoh pembuatannya, saya masih menggunakan tempalte bootstrap yang kemarin ya, sangat saya akan mengcopy folder svg dan sprite di pada tampilan bootstrap kita. Karena disini saya akan menggunakan file yang terdapat di 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 lumayan hingga disini dulu belajar kita mengenai cara menampilkan gambar icon dengan open iconic, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
