Lataa boxicons.zip-paketti v.2.1.2
Lisää head-tagiin ja aseta polku oikein : <link rel="stylesheet" href="boxicons/css/boxicons.css">
Kopio koodi leikepöydälle klikkaamalla ikoni-boksia.
Lisenssi ja lisää ohjeita:
Uusin versio ja lisenssin omistaja:
https://boxicons.com/
The MIT License (MIT)
Copyright (c) 2015-2021 Aniket Suvarna
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:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
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.
<i class="bx bx-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxl-facebook-square"></i>
- koko määräytyy xs,sm,md,lg arvoilla.
<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>
- Voit yhtenäistää koon elementin sisällä bx-fw -luokalla.
Elementin sisällä ikoni keskitetään
<i class="bx bxs-like bx-md bx-fw "></i>
- ikonia voi kääntä bx-rotate-90,bx-rotate-180,bx-rotate-270 tai
flipata suoraan bx-flip-horizontal, bx-flip-vertical.
<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>
- listauksen ikonit voi vaihtaa antamalla <ul>-listalle
classin bx-ul ja sitten halutun ikonin <li>-tagin sisään.
<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>
- Voit vetää ikonin reunaan bx-pull-left tai bx-pull-right -luokilla.
<i class="bx-pull-left bx bxs-quote-alt-left bx-lg"></li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus erat eu nibh laoreet, sed ullamcorper diam ornare.
- Voit asettaa reunuksen ikonille bx-border tai ympyrän bx-border-circle.
- Voit muokata väriä CSS:llä luokan border-color - arvolla
<i class="bx bxs-heart bx-border"></i>
<i class="bx bxs-heart bx-border-circle"></i>
- Animoi ikoni alla olevilla määreillä.
- lisäämällä -hover arvon perään, animointi tapahtuu vain hooverina esim. "bx-spin-hover".
- nopeutta voi säätää "animation-duration" -arvolla CSS:llä
- toistokertoja voi myös muuttaa "animation-iteration-count" CSS:llä
<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>