Bootstrap Icons are packaged up and published to npm. We only include the processed SVGs in this package—it's up to you and your team to implement. Read our docs for usage instructions.
For those using Packagist, you can also install Bootstrap Icons via Composer:
composer require twbs/bootstrap-icons
Also available in Figma.
Usage
Depending on your setup, you can include Bootstrap Icons in a handful of ways.
Copy-paste SVGs as embedded HTML
Reference via
Clone the repo, install dependencies, and start the Hugo server locally.
git clone https://github.com/twbs/icons/
cd icons
npm i
npm start
Then open http://localhost:4000 in your browser.
npm scripts
Here are some key
scripts you'll use during development. Be sure to look to our package.json for a complete list of scripts.
Script
Description
start
Alias for running docs-serve
docs-serve
Starts a local Hugo server
pages
Generates permalink pages for each icon with template Markdown
icons
Processes and optimizes SVGs in icons directory
Adding SVGs
Icons are typically only added by @mdo, but exceptions can be made. New glyphs are designed in Figma first on a 16x16px grid, then exported as flattened SVGs with fill (no stroke). Once a new SVG icon has been added to the icons directory, we use an npm script to:
Optimize our SVGs with SVGO.
Modify the SVGs source HTML, removing all attributes before setting new attributes and values in our preferred order.
Use
npm run icons to run the script, run npm run pages to build permalink pages, complete those pages, and, finally, commit the results in a new branch for updating.
Publishing
Documentation is published automatically when a new Git tag is published. See our GitHub Actions and package.json for more information.
License
MIT
Author
@mdo
Membuat Icon Menggunakan Bootstrap
lebakcyber.net – Membuat icon menggunakan Bootstrap. Oke jadi sekarang kita masuk ke pembahasan mengenai bagaimana cara menambahkan icon menggunakan Bootstrap kedalam halaman web yang sedang kita buat.
Bootstrap sudah menyediakan cara untuk menampilkan icon
dengan begitu mudah, cara tersebut disebut dengan istilah “Glyphicon” dan juga terdapat banyak icon yang telah disediakan oleh Bootstrap serta masing-masing icon tersebut telah diberinama dan untuk menggunakannya kita hanya perlu memanggil nama class dari masing-masing icon untuk menampilkannya.
Agar dapat menampilkan icon Bootstrap, kita haru menambahkan sebuah class “Glyphicon” didalam tag pembuka lalu setelah class tersebut ditambahkan selanjutnya kita hanya perlu
menambahkan nama class dari masing-masing icon sesuai dengan yang kita inginkan.
Kalau ingin melihat icon-icon apa saja yang telah disediakan oleh Bootstrap, kita dapat melihatnya langsung melalui situs web resmi bootstrap yang dapat diakses melalui link https://www.glyphicons.com/.
Sekarang kita akan praktekan bagaimana cara menampilkan icon kedalam halaman web yang sedang kita buat dengan menggunakan Bootstrap, silahkan buat file dengan nama index.html lalu masukan perintah dibawah ini :
Berdasarkan contoh diatas kita dapat menambahkan glyphicon bootstrap pada semua element html baik itu pada sebuah link, tombol ataupun lainnya. Ukuran dari icon bootstrap itu sendiri mengikuti ukuran font yang digunakan.
Oke jadi sampai disini dulu pembahasan kita mengenai bagaimana cara menambahkan sebuah icon kedalam halaman web yang kita buat dengan menggunakan bootstrap.
Semoga tutorial sederhana ini
dapat bermanfaat dan sampai jumpa pada tutorial belajar bootstrap lainnya.
