2018-06-17 13:18:42 +02:00
# BoxIcons
[](https://github.com/atisawd/boxicons/issues)
[](https://twitter.com/intent/tweet?text=Wow:& url=https%3A%2F%2Fgithub.com%2Fatisawd%2Fboxicons)
[](https://paypal.me/atisawd)
2018-07-22 19:54:07 +02:00
2018-07-25 13:03:36 +02:00
2018-06-17 13:18:42 +02:00
_High Quality web friendly icons_
2019-01-21 06:43:16 +01:00
'Boxicons' is a carefully designed open source iconset with 600+ icons. It's crafted to look enrich your website/app experience.
2018-06-26 10:49:48 +02:00
2019-01-21 06:43:16 +01:00
_Announcing Boxicons v1.9.0!_
2018-07-22 19:54:07 +02:00
2019-01-21 06:43:16 +01:00
New icons added in regular, solid styles.
2018-06-26 10:49:48 +02:00
2019-01-21 06:43:16 +01:00
- Improvements on the current icons
2018-07-25 13:03:36 +02:00
- Corrections to comply with the Material system icon rules
2018-06-26 10:49:48 +02:00
2018-06-17 13:18:42 +02:00
## Installation
To install via npm, simply do the following:
```bash
$ npm install boxicons --save
```
2018-06-23 11:53:43 +02:00
import the module
2018-06-17 13:18:42 +02:00
2018-06-23 11:53:43 +02:00
```javscript
2018-07-07 18:01:48 +02:00
import 'boxicons';
2018-06-23 11:53:43 +02:00
```
2018-06-17 13:18:42 +02:00
## Usage
2018-06-30 22:10:38 +02:00
### Using via CSS
2018-06-17 13:18:42 +02:00
1. Include the stylesheet on your document's `<head>`
```html
< head >
2018-06-17 13:31:12 +02:00
< link rel = "stylesheet" href = "boxicons.min.css" >
2018-06-17 13:18:42 +02:00
< / head >
```
Instead of installing you may use the remote version
```html
< head >
< link rel = "stylesheet"
2018-07-07 05:21:13 +02:00
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
2018-06-17 13:18:42 +02:00
<!-- or -->
< link rel = "stylesheet"
2018-07-07 05:21:13 +02:00
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
2018-06-17 13:18:42 +02:00
< / head >
```
2018-07-03 08:48:00 +02:00
2. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-' for regular icons , 'bxs-' for solid icons and 'bxl-' for logos:
2018-06-17 13:18:42 +02:00
```html
< i class = "bx bx-hot" > < / i >
2018-07-03 08:48:00 +02:00
< i class = "bx bxs-hot" > < / i >
< i class = "bx bxl-facebook-square" > < / i >
2018-06-17 13:18:42 +02:00
```
2018-07-07 05:21:13 +02:00
### Using via Web Component
Boxicons includes a Custom Element that makes using icons easy and efficient. To use it, add the `box-icon-element.js` file to the page:
```html
2018-07-07 16:20:52 +02:00
< script src = "https://unpkg.com/boxicons@latest/dist/boxicons.js" > < / script >
2018-07-07 05:21:13 +02:00
```
To use an icon, add the `<box-icon>` element to the location where the icon should be displayed:
```html
< box-icon name = "hot" > < / box-icon >
```
2018-07-14 05:16:04 +02:00
To use solid icons or logos add attribute `type` as solid or logo before the name
2018-07-07 05:21:13 +02:00
```html
2018-07-14 05:16:04 +02:00
< box-icon type = "solid" name = "hot" > < / box-icon >
< box-icon type = "logo" name = "facebook-square" > < / box-icon >
2018-07-07 05:21:13 +02:00
```
The `<box-icon>` custom element supports the following attributes:
```html
< box-icon
2018-07-14 05:16:04 +02:00
type = "regular|solid|logo"
2018-07-07 05:21:13 +02:00
name="adjust|alarms|etc...."
color="blue|red|etc..."
size="xs|sm|md|lg|cssSize"
rotate="90|180|270"
flip="horizontal|vertical"
border="square|circle"
animation="spin|tada|etc..."
pull = "left|right"
>< / box-icon >
```
2018-07-14 05:16:04 +02:00
- `type` : Should always be first and be one of the following values: `regular` ,`solid`, `logo`
2018-07-07 05:21:13 +02:00
- `name` : (REQUIRED) the name of the icon to be displayed
- `color` : A color for the icon.
- `size` : The size for the icon. It supports one of two types of values:
2018-11-20 11:29:52 +01:00
- One of the following shortcuts: `xs` , `sm` , `md` , `lg`
2018-07-07 05:21:13 +02:00
- A css unit size (ex. `60px` )
- `rotate` : one of the following values: `90` , `180` , `270`
- `flip` : one of the following values: `horizontal` , `vertical`
- `border` : one of the following values: `square` , `circle`
- `animation` : One of the following values: `spin` , `tada` , `flashing` , `burst` , `fade-left` , `fade-right` , `spin-hover` , `tada-hover` , `flashing-hover` , `burst-hover` , `fade-left-hover` , `fade-right-hover`
- `pull` : one of the following values: `left` ,`right`
The Custom Element class (`BoxIconElement`) exposes the following static members:
- `tagName` : property that holds the HTML element tag name. Default: `box-icon`
- `defined([tagName])` : Defines the Element in the custom element registry using either the tagName provided on input or the (default) the one defined on the Class.
- `cdnUrl` : property that holds the URL that will be used to retrieve the images. URL should point to the folder that contains the images. example: `//unpkg.com/boxicons@1.5.2/svg` (no trailing forward slash)
- `getIconSvg(iconName)` : method used to retrieve the SVG image. Should return a Promise that resolves with the SVG source (String).
2018-06-17 13:18:42 +02:00
[Check out all the icons here! ](https://boxicons.com )
2018-06-30 22:10:38 +02:00
2018-06-17 13:18:42 +02:00
## License
2018-06-29 22:00:13 +02:00
[You can read the license here! ](https://boxicons.com/get-started#license )
2018-06-17 13:18:42 +02:00
## Contributing
Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues.
2018-06-23 11:53:43 +02:00
Caught a mistake or want to contribute to the documentation? [Edit this page on Github ](https://github.com/atisawd/boxicons/blob/master/README.md )
