-
Notifications
You must be signed in to change notification settings - Fork 0
/
usage.html
91 lines (91 loc) · 29.7 KB
/
usage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"/><meta charSet="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="referrer" content="always"/><meta name="title" content="Boxicons : Premium web friendly icons for free"/><meta name="copyright" content="Boxicons"/><meta name="description" content="Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines"/><meta property="og:type" content="website"/><meta property="og:description" content="Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines"/><meta id="og-title" property="og:title" content="Boxicons : Premium web friendly icons for free"/><meta property="og:url" content="https://boxicons.com/"/><meta property="og:image" content="http://boxicons.com/static/img/og-image.png"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:url" content="https://boxicons.com/"/><meta property="twitter:title" content="Boxicons : Premium web friendly icons for free"/><meta property="twitter:description" content="Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines"/><meta property="twitter:image" content="http://boxicons.com/static/img/og-image.png"/><meta name="keywords" content="boxicons,free icons,open source icons, royalty free icons,google icons, icon, line icon, sharp icon, material icons, premium icons, pixel perfect icons, open source icons, free icon set"/><link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico?v=13"/><title>Usage</title><meta name="next-head-count" content="21"/><link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"/><link rel="preload" href="/_next/static/css/edccd5fa90fecb2b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/edccd5fa90fecb2b.css" data-n-g=""/><link rel="preload" href="/_next/static/css/a1b64bedabfa9d0c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/a1b64bedabfa9d0c.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-a65a8fe653d36daf.js" defer=""></script><script src="/_next/static/chunks/framework-3ebe1e3a2d989fac.js" defer=""></script><script src="/_next/static/chunks/main-72b966e2e576c404.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b91a3ae4d9f00c06.js" defer=""></script><script src="/_next/static/chunks/951-d34a44cbdad61abd.js" defer=""></script><script src="/_next/static/chunks/pages/usage-b97685c80ce87671.js" defer=""></script><script src="/_next/static/DNHfRjsQaNmPABrOMCg7E/_buildManifest.js" defer=""></script><script src="/_next/static/DNHfRjsQaNmPABrOMCg7E/_ssgManifest.js" defer=""></script></head><body><div id="__next"><header class="Navigation_header__0bA2x"><div class="Navigation_container__rUgWS"><div class="Navigation_logo__FhJi4"><a href="/"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 397.2 86"><g><path class="Navigation_logo_text__RGWu_" fill="#0D0C22" d="M141.8,45.9c1.6,2,2.4,4.3,2.4,7c0,3.9-1.3,6.9-3.9,9.1c-2.6,2.2-6.3,3.3-11.1,3.3H108V19.9h20.6 c4.6,0,8.2,1,10.7,3c2.5,2,3.8,4.9,3.8,8.6c0,2.7-0.7,5-2.2,6.8c-1.5,1.8-3.4,3-5.7,3.6C138,42.5,140.2,43.9,141.8,45.9z M119,38.4 h7.2c3.8,0,5.7-1.6,5.7-4.9c0-3.3-1.9-4.9-5.8-4.9H119L119,38.4L119,38.4z M132.9,51.3c0-1.6-0.5-2.9-1.6-3.8 c-1.1-0.9-2.6-1.4-4.6-1.4H119v10.2h7.8C130.9,56.3,132.9,54.7,132.9,51.3z"></path><path class="Navigation_logo_text__RGWu_" fill="#0D0C22" d="M175.6,31.2c2.8,1.5,5,3.6,6.6,6.4c1.6,2.8,2.4,6,2.4,9.8c0,3.7-0.8,7-2.4,9.8s-3.8,4.9-6.6,6.4 c-2.8,1.5-6,2.2-9.5,2.2s-6.7-0.7-9.6-2.2c-2.8-1.5-5-3.6-6.6-6.4c-1.6-2.8-2.4-6-2.4-9.8c0-3.7,0.8-7,2.4-9.8 c1.6-2.8,3.8-4.9,6.6-6.4c2.8-1.5,6-2.2,9.6-2.2S172.8,29.7,175.6,31.2z M160.8,40.8c-1.4,1.5-2.2,3.7-2.2,6.6 c0,2.9,0.7,5.1,2.2,6.5c1.4,1.5,3.2,2.2,5.3,2.2s3.9-0.7,5.3-2.2c1.4-1.5,2.1-3.7,2.1-6.5c0-2.9-0.7-5.1-2.1-6.6 c-1.4-1.5-3.2-2.3-5.3-2.3C164,38.5,162.2,39.2,160.8,40.8z"></path><path class="Navigation_logo_text__RGWu_" fill="#0D0C22" d="M212.1,65.3L204.8,55l-6,10.2h-12.1l11.9-18.7l-12.3-17.1h12.3l7.3,10.1l6-10.1h12.1l-12.1,18.2l12.6,17.6 L212.1,65.3L212.1,65.3z"></path><path class="Navigation_logo_text__RGWu_" fill="#0D0C22" d="M228.7,15.2c1.2-1.1,2.8-1.6,4.8-1.6s3.6,0.5,4.8,1.6s1.8,2.5,1.8,4.1c0,1.6-0.6,3-1.8,4.1 c-1.2,1.1-2.8,1.6-4.8,1.6s-3.6-0.5-4.8-1.6c-1.2-1.1-1.8-2.4-1.8-4.1C226.9,17.7,227.5,16.3,228.7,15.2z M238.9,29.4v35.8h-11 V29.4H238.9z"></path><path class="Navigation_logo_text__RGWu_" fill="#0D0C22" d="M273.6,32.8c3.1,2.5,5.1,6,5.9,10.5h-11.6c-0.3-1.5-1.1-2.7-2.1-3.6c-1.1-0.9-2.4-1.3-4-1.3 c-1.9,0-3.5,0.8-4.8,2.3c-1.2,1.5-1.9,3.7-1.9,6.6s0.6,5.1,1.9,6.6c1.2,1.5,2.8,2.3,4.8,2.3c1.6,0,3-0.4,4-1.3 c1.1-0.9,1.8-2.1,2.1-3.6h11.6c-0.8,4.5-2.8,8-5.9,10.5c-3.1,2.5-7,3.8-11.6,3.8c-3.5,0-6.6-0.7-9.3-2.2c-2.7-1.5-4.8-3.6-6.4-6.4 c-1.5-2.8-2.3-6-2.3-9.8c0-3.8,0.8-7,2.3-9.8c1.5-2.8,3.6-4.9,6.4-6.4c2.7-1.5,5.9-2.2,9.4-2.2C266.6,29,270.5,30.3,273.6,32.8z"></path><path class="Navigation_logo_text__RGWu_" fill="#0D0C22" d="M310.9,31.2c2.8,1.5,5,3.6,6.6,6.4c1.6,2.8,2.4,6,2.4,9.8c0,3.7-0.8,7-2.4,9.8c-1.6,2.8-3.8,4.9-6.6,6.4 s-6,2.2-9.5,2.2s-6.7-0.7-9.6-2.2c-2.8-1.5-5-3.6-6.6-6.4c-1.6-2.8-2.4-6-2.4-9.8c0-3.7,0.8-7,2.4-9.8c1.6-2.8,3.8-4.9,6.6-6.4 c2.8-1.5,6-2.2,9.6-2.2C304.9,29,308.1,29.7,310.9,31.2z M296,40.8c-1.4,1.5-2.1,3.7-2.1,6.6c0,2.9,0.7,5.1,2.1,6.5 s3.2,2.2,5.3,2.2c2.1,0,3.9-0.7,5.3-2.2s2.1-3.7,2.1-6.5c0-2.9-0.7-5.1-2.1-6.6c-1.4-1.5-3.2-2.3-5.3-2.3 C299.2,38.5,297.5,39.2,296,40.8z"></path><path class="Navigation_logo_text__RGWu_" fill="#0D0C22" d="M357.5,33.2c2.4,2.7,3.6,6.5,3.6,11.3v20.8h-11V45.7c0-2.4-0.6-4.3-1.9-5.6c-1.3-1.3-2.9-2-5-2 c-2.2,0-4,0.7-5.3,2.1c-1.3,1.4-2,3.4-2,6v19h-11V29.4h11V36c1-2.1,2.6-3.8,4.6-5.1c2-1.2,4.4-1.9,7.2-1.9 C351.8,29,355.1,30.4,357.5,33.2z"></path><path class="Navigation_logo_text__RGWu_" fill="#0D0C22" d="M391.6,32.4c2.7,2.3,4.4,5.3,5.1,9h-10.3c-0.3-1.5-1-2.6-2-3.4c-1-0.8-2.4-1.3-3.9-1.3c-1.2,0-2.2,0.3-2.8,0.8 c-0.6,0.5-1,1.3-1,2.3c0,1.1,0.6,1.9,1.8,2.5c1.2,0.6,3,1.1,5.6,1.7c2.7,0.6,5,1.3,6.7,2c1.8,0.7,3.3,1.7,4.6,3.2 c1.3,1.5,1.9,3.5,1.9,6c0,2.1-0.6,3.9-1.7,5.5c-1.1,1.6-2.7,2.8-4.8,3.7c-2.1,0.9-4.6,1.3-7.4,1.3c-4.8,0-8.7-1.1-11.6-3.2 c-2.9-2.1-4.7-5.2-5.3-9.2H377c0.2,1.5,0.8,2.7,2,3.5c1.1,0.8,2.6,1.2,4.4,1.2c1.2,0,2.2-0.3,2.8-0.9s1-1.3,1-2.3 c0-1.2-0.6-2.1-1.8-2.7c-1.2-0.5-3.1-1.1-5.7-1.7c-2.7-0.6-4.8-1.2-6.5-1.8c-1.7-0.6-3.2-1.7-4.4-3.1c-1.2-1.4-1.9-3.4-1.9-5.9 c0-3.2,1.2-5.8,3.7-7.8s5.9-3,10.3-3C385.3,29,388.9,30.1,391.6,32.4z"></path></g><path class="Navigation_logo_primary__St47_" fill="#595EEF" d="M4.7,21.2c-0.9,1.4-1.4,3-1.4,4.6l0,34.8c0,2.4,1.3,4.7,3.4,5.9l31.5,17.9c2.6,1.5,5.8-0.4,5.8-3.4V43.7l0,0 L4.7,21.2z"></path><path class="Navigation_logo_secondary__THTwH" fill="#6DEAE7" d="M44,43.7l34.2-17.2c2.8-1.4,2.9-5.3,0.2-6.8L47.1,1.8c-2-1.1-4.4-1.2-6.4-0.2L8.1,18.1 c-1.4,0.7-2.6,1.8-3.5,3.1L44,43.7z"></path></svg></a></div><nav><ul><li class="Navigation_nav_link__9ZyJA"><a rel="noreferrer" target="_blank" href="https://github.com/atisawd/boxicons">Github</a></li><li class="Navigation_nav_link__9ZyJA"><a href="/usage">Usage</a></li><li><div class="Buttons_nav_button__3Dypb"><a rel="noreferrer" href="http://gum.co/boxicons" target="_blank">Download v<!-- -->2.1.4</a></div></li></ul></nav><div class="Navigation_dark_button__4jaYK"><i class="bx bxs-moon"></i></div></div></header><div class="Usage_container__iuR3k"><div></div><div class="Usage_page_head__Gl34q"><div class="Usage_page_head_bg__Przs2"><div class="Usage_page_head_in__PP3AM"><h1>Getting Started</h1><p>Switching to boxicons is easy and can be done in 2 steps. There are more features than just the icons set. Boxicons also follows the official Google Material Design guidelines</p></div></div></div><main class="Usage_main__1MRC5"><aside class="Sidebar_sidebar__Rs8VX"><ul class="Sidebar_sidebar_list__Gov5R"><li><a href="#install-via-npm">Install via NPM</a></li><li><a href="#web-component">Using the Web Component</a></li><li><a href="#usage-as-font">Usage as a Font</a><ul><li><a href="#import-css">Import the CSS</a></li><li><a href="#html">HTML</a></li></ul></li><li><a href="#starter-template">Starter Templates</a></li><li><a href="#styling">Styling</a><ul><li><a href="#sizing">Sizing</a></li><li><a href="#rotation-flipping">Rotation & Flipping</a></li><li><a href="#list-icons">List Icons</a></li><li><a href="#fixed-width">Fixed Width</a></li><li><a href="#pull-icon">Pulled Icons</a></li><li><a href="#border">Border</a></li><li><a href="#animation">Animation</a></li><li><a href="#animation-hover">Animation on Hover</a></li></ul></li><li><a href="#contribution">Contribution</a></li><li><a href="#license">License</a></li></ul></aside><div class="Content_content__xLjU6"><h3>Quick Start</h3><div><p>Looking to quickly add Boxicons to your project? Use the paths to CDN or Download the files <a href="https://gum.co/boxicons?wanted=true" rel="noreferrer" target="_blank" data-gumroad-single-product="true">here</a>.</p></div><h3 id="install-via-npm">Install via NPM</h3><div><p> Install the boxicons package by copy pasting the following in your terminal:</p><div class="Content_hljs_wrap__eftou"><pre><code class="xml">$ npm install boxicons --save</code></pre></div><p> Import the npm module in your javascript</p><div class="Content_hljs_wrap__eftou"><pre><code class="xml">import 'boxicons'</code></pre></div></div><h3 id="web-component">Using the Web Component</h3><div><p>Boxicons includes a Custom Element that makes using icons easy and efficient. To use it, add the <code class="Content_side___lfz2">boxicons.js</code> file to the page:</p><div class="Content_hljs_wrap__eftou"> <pre><code class="xml"> <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script></code></pre></div><p>To use an icon, add the <code class="Content_side___lfz2">box-icon</code> element to the location where the icon should be displayed:</p><div class="Content_hljs_wrap__eftou"> <pre><code class="xml"><box-icon name="rocket"></box-icon></code></pre></div><p> To use solid icons or logos add attribute <code class="Content_side___lfz2">type</code> as solid or logo </p><div class="Content_hljs_wrap__eftou"><pre><code class="xml"><box-icon type="solid" name="rocket"></box-icon>
<!-- --><box-icon type="logo" name="facebook-square"></box-icon></code></pre></div><p>The <code class="Content_side___lfz2">box-icon</code> custom element supports the following attributes:</p><div class="Content_hljs_wrap__eftou"><pre><code class="xml"> <box-icon <!-- -->
<!-- --> type = "regular|solid|logo"
<!-- -->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..."
<!-- -->animation="spin|tada|etc..."
<!-- -->pull = "left|right"
<!-- -->></box-icon></code></pre></div></div><h3 id="usage-as-font">Usage as a Font</h3><h4 id="import-css">Import the CSS</h4><div><p>Copy-paste the stylesheet <code class="Content_side___lfz2">link</code> into your <code class="Content_side___lfz2">head</code> to load our CSS</p> <div class="Content_hljs_wrap__eftou"><pre><code class="xml"><link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'></code></pre></div><p>This will load boxicons font into your webpage</p></div><h4 id="html">HTML</h4><div><p> To use an icon on your page, add a prefix<code class="Content_side___lfz2">bx-</code> for regular icons, <code class="Content_side___lfz2">bxs-</code> for solid icons & <code class="Content_side___lfz2">bxl-</code> for logos followed by the icon name and seperate class with the<code class="Content_side___lfz2">bx</code>:</p> <div class="Content_hljs_wrap__eftou"> <pre><code class="xml"><i class='bx bx-user'></i>
<!-- --><i class='bx bxs-user'></i>
<!-- --><i class='bx bxl-facebook-square'></i>
</code></pre></div>You can see the names of all the icons <a href="/cheatsheet">here</a></div><h3 id="starter-template">Starter Templates</h3><div><p> Create an HTML document and copy-paste the starter template</p> <div class="Content_hljs_wrap__eftou"> <pre><code class="xml"><!doctype html><!-- -->
<!-- --><html lang='en'><!-- -->
<!-- --><head><!-- -->
<!-- --><meta charset='utf-8'><!-- -->
<!-- --><meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'><!-- -->
<!-- --><!-- Boxicons CSS --><!-- -->
<!-- --><link href='https://unpkg.com/boxicons@<!-- -->2.1.4<!-- -->/css/boxicons.min.css' rel='stylesheet'><!-- -->
<!-- --><title>Hello, Boxicons!</title><!-- -->
<!-- --></head><!-- -->
<!-- --><body><!-- -->
<!-- --><h1>Hello, Boxicons!</h1><!-- -->
<!-- --><i class='bx bx-hot'></i><!-- -->
<!-- --><i class='bx bxs-hot'></i><!-- -->
<!-- --><i class='bx bxl-facebook-square'></i><!-- -->
<!-- --></body><!-- -->
<!-- --></html></code></pre></div><p>A template for usage with the web component instead of icon font</p> <div class="Content_hljs_wrap__eftou"><pre><code class="xml"><!doctype html><!-- -->
<!-- --><html lang='en'><!-- -->
<!-- --><head><!-- -->
<!-- --><meta charset='utf-8'><!-- -->
<!-- --><meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'><!-- -->
<!-- --><!-- Boxicons JS --><!-- -->
<!-- --><link href='https://unpkg.com/boxicons@<!-- -->2.1.4<!-- -->/dist/boxicons.js' rel='stylesheet'><!-- -->
<!-- --><title>Hello, Boxicons!</title><!-- -->
<!-- --></head><!-- -->
<!-- --><body><!-- -->
<!-- --><h1>Hello, Boxicons!</h1><!-- -->
<!-- --><box-icon name='hot'></box-icon><!-- -->
<!-- --><box-icon type='solid' name='hot'></box-icon><!-- -->
<!-- --><box-icon type='logo' name='facebook-square'></box-icon><!-- -->
<!-- --></body><!-- -->
<!-- --></html></code></pre></div></div><h3 id="styling">Styling</h3><h4 id="sizing">Sizing</h4><div><p> You can change size of the icon with<code class="Content_side___lfz2">font-size</code> CSS. It will inherit the <code class="Content_side___lfz2">font-size</code>from the parent by default. There are fixed sizes you can add to the icon by adding classes<code class="Content_side___lfz2">bx-xs</code>, <code class="Content_side___lfz2">bx-sm</code>, <code class="Content_side___lfz2">bx-md</code> and <code class="Content_side___lfz2">bx-lg</code></p> <div class="Content_icon_display__dvaTf"><i class="bx bxs-like bx-xs "></i><i class="bx bxs-like bx-sm"></i><i class="bx bxs-like bx-md"></i><i class="bx bxs-like bx-lg"></i></div><div class="Content_hljs_wrap__eftou"> <pre><code class="xml"><i class='bx bxs-like bx-xs'></i><!-- -->
<!-- --><i class='bx bxs-like bx-sm'></i><!-- -->
<!-- --><i class='bx bxs-like bx-md'></i><!-- -->
<!-- --><i class='bx bxs-like bx-lg'></i><!-- -->
<!-- --><!-- Boxicons web component --><!-- -->
<!-- --><box-icon name='like' size='lg'></box-icon><!-- -->
</code></pre></div></div><h4 id="rotation-flipping">Rotation & Flipping</h4><div><p> Rotate the icons using classes <code class="Content_side___lfz2">bx-rotate-90</code>, <code class="Content_side___lfz2">bx-rotate-180</code> and <code class="Content_side___lfz2">bx-rotate-270</code> or Flip the icons using <code class="Content_side___lfz2">bx-flip-horizontal</code> and <code class="Content_side___lfz2">bx-flip-vertical</code></p><div class="Content_icon_display__dvaTf"><i class="bx bxs-like bx-rotate-90 bx-md"></i><i class="bx bxs-like bx-rotate-180 bx-md"></i><i class="bx bxs-like bx-rotate-270 bx-md"></i><i class="bx bxs-like bx-flip-horizontal bx-md"></i><i class="bx bxs-like bx-flip-vertical bx-md"></i></div><div class="Content_hljs_wrap__eftou"> <pre><code class="xml"><i class='bx bxs-like bx-rotate-90'></i><!-- -->
<!-- --><i class='bx bxs-like bx-rotate-180'></i><!-- -->
<!-- --><i class='bx bxs-like bx-rotate-270'></i><!-- -->
<!-- --><i class='bx bxs-like bx-flip-horizontal'></i><!-- -->
<!-- --><i class='bx bxs-like bx-flip-vertical '></i><!-- -->
<!-- --><!-- Boxicons web component --><!-- -->
<!-- --><box-icon name='like' rotate='90'></box-icon><!-- -->
<!-- --><box-icon name='like' flip='horizontal'></box-icon><!-- -->
</code></pre></div></div><h4 id="list-icons">List Icons</h4><div><p> Use icons as bullets for the list by adding class <code class="Content_side___lfz2">bx-ul</code> to the unordered list element and include the icons inside the<code class="Content_side___lfz2">li</code> </p> <div class="Content_icon_display__dvaTf"><ul class="bx-ul"><li> <i class="bx bx-right-arrow"></i>List item 1</li><li> <i class="bx bx-x"></i>List item 2</li><li> <i class="bx bx-plus"></i>List item 3</li></ul></div><div class="Content_hljs_wrap__eftou"> <pre><code class="xml"><ul class='bx-ul'><!-- -->
<!-- --><li><i class='bx bx-right-arrow'></i>List Item 1</li><!-- -->
<!-- --><li><i class='bx bx-x'></i>List Item 2</li><!-- -->
<!-- --><li><i class='bx bx-plus'></i>List Item 3</li><!-- -->
<!-- --></ul></code></pre></div></div><h4 id="fixed-width">Fixed Width</h4><div><p> You can use fixed width class <code class="Content_side___lfz2">bx-fw</code> \to get a fixed width icon next to the text<code class="Content_side___lfz2">li</code> </p> <div class="Content_icon_display__dvaTf"><div> <i class="bx-fw bx bxl-facebook-square"></i>Facebook</div><div> <i class="bx-fw bx bxl-slack"></i>Slack</div><div> <i class="bx-fw bx bxl-instagram"></i>Instagram</div></div><div class="Content_hljs_wrap__eftou"><pre><code class="xml"><i class='bx-fw bx bxl-facebook-square'></i>Facebook</code></pre></div></div><h4 id="pull-icon">Pulled Icons</h4><div><p> Use class <code class="Content_side___lfz2">bx-pull-left</code> or <code class="Content_side___lfz2">bx-pull-right</code> on icons for easy pull quotes<code class="Content_side___lfz2">li</code> </p> <div class="Content_icon_display__dvaTf"><i class="bx-pull-left bx bxs-quote-alt-left bx-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus erat eu nibh laoreet, sed ullamcorper diam ornare. Quisque viverra ante nec luctus imperdiet. Quisque ut imperdiet nisi. Quisque ultrices laoreet odio, non vestibulum lacus molestie sollicitudin. Phasellus nec dolor eget nunc commodo sodales vel vel eros.</div><div class="Content_hljs_wrap__eftou"> <pre><code class="xml"><i className='bx-pull-left bx bxs-quote-alt-left bx-lg'/><!-- -->
<!-- -->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus erat eu nibh laoreet, sed ullamcorper diam ornare. Quisque viverra ante nec luctus imperdiet. Quisque ut imperdiet nisi. Quisque ultrices laoreet odio, non vestibulum lacus molestie sollicitudin. Phasellus nec dolor eget nunc commodo sodales vel vel eros. <!-- Boxicons web component --><!-- -->
<!-- --><box-icon name='like' pull='left' size='lg'></box-icon><!-- -->
<!-- -->Quisque ultrices laoreet odio, non vestibulum lacus molestie sollicitudin. Phasellus nec dolor eget nunc commodo sodales vel vel eros.</code></pre></div></div><h4 id="border">Border</h4><div><p> Add border to your icons with classes <code class="Content_side___lfz2">bx-border</code>, <code class="Content_side___lfz2">bx-border-circle</code></p> <div class="Content_icon_display__dvaTf"><i class="bx bxs-heart bx-border bx-md"></i><i class="bx bxs-heart bx-border-circle bx-md"></i> </div><div class="Content_hljs_wrap__eftou"> <pre><code class="xml"><i class='bx bxs-heart bx-border'></i><!-- -->
<!-- --><i class='bx bxs-heart bx-border-circle'></i><!-- -->
<!-- --><!-- Boxicons web component --><!-- -->
<!-- --><box-icon name='heart' border='circle'></box-icon><!-- -->
</code></pre></div></div><h4 id="animation">Animation</h4><div><p> Animate your icons with pre built CSS animations using classes <code class="Content_side___lfz2">bx-spin</code>,<code class="Content_side___lfz2">bx-tada</code>,<code class="Content_side___lfz2">bx-flashing</code>,<code class="Content_side___lfz2">bx-burst</code>,<code class="Content_side___lfz2">bx-fade-left</code> and <code class="Content_side___lfz2">bx-fade-right</code></p><p>You can change the speed of the animation with the <code class="Content_side___lfz2">animation-duration</code> property & to change the number of times the animation takes place with the property <code class="Content_side___lfz2">animation-iteration-count</code> in CSS</p><div class="Content_icon_display__dvaTf"><i class="bx bx-loader bx-spin bx-md"></i><i class="bx bxs-bell bx-tada bx-md"></i><i class="bx bxs-error bx-flashing bx-md"></i><i class="bx bx-radio-circle bx-burst bx-md"></i><i class="bx bx-fade-left bxs-left-arrow-circle bx-md"></i><i class="bx bx-fade-right bxs-right-arrow-circle bx-md"></i><i class="bx bx-fade-up bxs-up-arrow-circle bx-md"></i><i class="bx bx-fade-down bxs-down-arrow-circle bx-md"></i></div><div class="Content_hljs_wrap__eftou"> <pre><code class="xml"><i class='bx bxs-like bx-spin'></i><!-- -->
<!-- --><i class='bx bxs-like bx-tada'></i><!-- -->
<!-- --><i class='bx bxs-like bx-flashing'></i><!-- -->
<!-- --><i class='bx bxs-like bx-burst'></i><!-- -->
<!-- --><i class='bx bxs-like bx-fade-left'></i><!-- -->
<!-- --><i class='bx bxs-like bx-fade-right'></i><!-- -->
<!-- --><i class='bx bxs-like bx-fade-up'></i><!-- -->
<!-- --><i class='bx bxs-like bx-fade-down'></i><!-- -->
<!-- --><!-- Boxicons web component --><!-- -->
<!-- --><box-icon name='bell' animation='tada'></box-icon><!-- -->
</code></pre></div></div><h4 id="animation-hover">Animation on Hover</h4><div><p> Animate your icons on hover with pre built CSS animations using classes <code class="Content_side___lfz2">bx-spin-hover</code>,<code class="Content_side___lfz2">bx-tada-hover</code>,<code class="Content_side___lfz2">bx-flashing-hover</code>,<code class="Content_side___lfz2">bx-burst-hover</code>,<code class="Content_side___lfz2">bx-fade-left-hover</code> and <code class="Content_side___lfz2">bx-fade-right-hover</code></p> <p>You can change the speed of the animation with the <code class="Content_side___lfz2">animation-duration</code> property & to change the number of times the animation takes place with the property <code class="Content_side___lfz2">animation-iteration-count</code> in CSS</p><div class="Content_icon_display__dvaTf"><i class="bx bx-loader bx-spin-hover bx-md"></i><i class="bx bxs-bell bx-tada-hover bx-md"></i><i class="bx bxs-error bx-flashing-hover bx-md"></i><i class="bx bx-radio-circle bx-burst-hover bx-md"></i><i class="bx bx-fade-left-hover bxs-left-arrow-circle bx-md"></i><i class="bx bx-fade-right-hover bxs-right-arrow-circle bx-md"></i><i class="bx bx-fade-up-hover bxs-up-arrow-circle bx-md"></i><i class="bx bx-fade-down-hover bxs-down-arrow-circle bx-md"></i></div><div class="Content_hljs_wrap__eftou"><pre><code class="xml"><i class='bx bxs-like bx-spin-hover'></i><!-- -->
<!-- --><i class='bx bxs-like bx-tada-hover'></i><!-- -->
<!-- --><i class='bx bxs-like bx-flashing-hover'></i><!-- -->
<!-- --><i class='bx bxs-like bx-burst-hover'></i><!-- -->
<!-- --><i class='bx bxs-like bx-fade-left-hover'></i><!-- -->
<!-- --><i class='bx bxs-like bx-fade-right-hover'></i><!-- -->
<!-- --><i class='bx bxs-like bx-fade-up-hover'></i><!-- -->
<!-- --><i class='bx bxs-like bx-fade-down-hover'></i><!-- -->
<!-- --><!-- Boxicons web component --><!-- -->
<!-- --><box-icon name='bell' animation='tada-hover'></box-icon><!-- -->
</code></pre></div></div><h3 id="contribution">Contribution</h3><div><p>Want to report a bug ? Have some suggestions or ideas ? Have an icon or a feature request? Create a new issue on Github with the appropriate label <a href="https://github.com/atisawd/boxicons/issues/new" rel="noreferrer" target="_blank">here</a></p></div><h3 id="license">License</h3><div><p> The MIT License (MIT)</p><p>Copyright (c) 2015-2021 Aniket Suvarna</p><p> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p><p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p><p>THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p></div></div></main></div><footer class="Footer_footer__Yf2j3"><div class="Footer_footer_in__0zazL"><div class="Footer_footer_links__QY9qt"><a href="/cheatsheet">Cheatsheet</a><a href="https://github.com/atisawd/boxicons/issues/new?labels=icon%20request," target="blank">Request Icons</a><a href="/usage#license">License</a></div><div class="Footer_footer_logo__dxlZr"><a href="https://atisa.gumroad.com" rel="noopener noreferrer" target="_blank"><svg version="1.1" x="0px" y="0px" width="1825.596px" height="238.593px" viewBox="0 0 1825.596 238.593"><path fill="#6e6d7a" d="M49.282,228.111"></path><g><polyline opacity="0.6" fill="#6e6d7a" points="241.149,77.679 241.149,226.777 286.708,226.777 286.708,226.777 329.893,226.777 329.893,226.777 375.448,226.777 375.448,57.378 375.448,11.819 375.448,11.817 329.893,11.817 329.893,11.819 286.708,11.819 286.704,11.819 286.708,11.817 241.149,11.817 "></polyline><polyline fill="#6e6d7a" points="282.99,11.819 282.985,11.819 282.99,11.817 237.43,11.817 237.43,11.817 194.245,11.819 194.245,11.819 148.686,11.819 -0.001,226.777 45.563,226.777 45.563,226.777 88.743,226.777 133.082,226.777 134.303,226.777 237.43,77.679 "></polyline></g><g><path fill="#6e6d7a" d="M749.099,238.593l-21.69-50.389h-97.772l-21.69,50.389h-55.394L653.328,5.34h50.388l100.776,233.253 H749.099z M678.688,74.748l-29.364,67.742h58.396L678.688,74.748z"></path><path fill="#6e6d7a" d="M980.018,50.389v188.205h-52.059V50.389h-66.071V5.34h184.201v45.049H980.018z"></path><path fill="#6e6d7a" d="M1150.867,5.34h52.057v233.253h-52.057V5.34z"></path><path fill="#6e6d7a" d="M1381.615,51.891c-5.007,4.119-7.509,9.568-7.509,16.351c0,6.789,3.056,12.181,9.177,16.187 c6.114,4.004,20.239,8.732,42.379,14.182c22.134,5.453,39.317,13.629,51.557,24.525c12.232,10.902,18.354,26.813,18.354,47.721 c0,20.912-7.842,37.873-23.525,50.889c-15.684,13.014-36.32,19.52-61.9,19.52c-36.932,0-70.189-13.68-99.773-41.043l31.032-38.041 c25.136,22.023,48.386,33.035,69.742,33.035c9.563,0,17.069-2.055,22.524-6.174c5.447-4.113,8.176-9.676,8.176-16.686 c0-7.008-2.895-12.564-8.678-16.686c-5.786-4.113-17.24-8.285-34.368-12.514c-27.146-6.449-47-14.85-59.565-25.193 c-12.57-10.345-18.854-26.582-18.854-48.72c0-22.134,7.951-39.21,23.859-51.223C1360.145,6.008,1380,0,1403.807,0 c15.568,0,31.143,2.67,46.718,8.008c15.568,5.34,29.142,12.906,40.71,22.692l-26.361,38.042 c-20.244-15.352-41.16-23.025-62.734-23.025C1393.459,45.717,1386.619,47.776,1381.615,51.891z"></path><path fill="#6e6d7a" d="M1770.201,238.593l-21.689-50.389h-97.773l-21.689,50.389h-55.395L1674.432,5.34h50.387l100.777,233.253 H1770.201z M1699.789,74.748l-29.364,67.742h58.397L1699.789,74.748z"></path></g></svg></a></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/usage","query":{},"buildId":"DNHfRjsQaNmPABrOMCg7E","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[{"src":"https://www.googletagmanager.com/gtag/js?id=G-S33FZPYGF0","strategy":"afterInteractive"},{"id":"google-analytics-script","strategy":"afterInteractive","children":"\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', 'G-S33FZPYGF0', {\n page_path: window.location.pathname,\n });\n "}]}</script></body></html>