bootstrap-icons-font
Version:
An icon font library based on Bootstrap Icons
84 lines (52 loc) • 2.07 kB
Markdown
# Bootstrap Icons Font
An icon font library including 1000+ icons, based on [Bootstrap Icons](https://icons.getbootstrap.com/), generated by [IcoMoon](https://icomoon.io/).
## Install
Bootstrap Icons Font is published to npm. You can install it via command line.
### Install with npm:
npm install bootstrap-icons-font
### Install with yarn:
yarn add bootstrap-icons-font
## Usage
### Basic Icons
The Bootstrap Icons Font is designed to be used with inline elements, `i` and `span` are recommended.
<i class="bi-gear"></i>
<span class="bi-gear-fill"></span>
### Icon Sizes
We provide some useful utilities to set font sizes:
- `.bi--xs` : font size is 0.5em
- `.bi--sm` : font size is 0.75em
- `.bi--md` : font size is 1em
- `.bi--lg` : font size is 1.25em
- `.bi--xl` : font size is 1.5em
- `.bi--2xl` : font size is 2em
- `.bi--3xl` : font size is 2.5em
- `.bi--4xl` : font size is 3em
- `.bi--5xl` : font size is 3.5em
- `.bi--6xl` : font size is 4em
- `.bi--7xl` : font size is 4.5em
- `.bi--8xl` : font size is 5em
Examples:
<i class="bi-gear-fill bi--lg"></i>
<i class="bi-gear-fill bi--2xl"></i>
### Animated Icons
You can use the `bi--spin` class to get any icon to rotate.
<i class="bi-gear bi--spin"></i>
### Rotated Icons
You can use the bi--rotate-* class to rotate icons.
<i class="bi-bootstrap bi--rotate-45"></i>
<i class="bi-bootstrap bi--rotate-90"></i>
<i class="bi-bootstrap bi--rotate-135"></i>
<i class="bi-bootstrap bi--rotate-180"></i>
<i class="bi-bootstrap bi--rotate-225"></i>
<i class="bi-bootstrap bi--rotate-270"></i>
<i class="bi-bootstrap bi--rotate-315"></i>
### Flipped Icons
You can use the bi--flip-* class to flip icons.
<i class="bi-bootstrap bi--flip-horizontal"></i>
<i class="bi-bootstrap bi--flip-vertical"></i>
## Icons
## License
MIT
## Thanks
Thank Bootstrap team for providing us the great icons.