iconoo
iconoo copied to clipboard
A Flexible Pure CSS Icon Pack! One Tag One Icon! https://qieguo2016.github.io/iconoo/
iconoo
iconoo是一个纯CSS的图标库,基于 icono 改造而成,增加了整体缩放功能(线宽不变)和webpack
引入方式。
How to use
- 下载 后直接link引入css文件,然后直接在标签中引入相应的class即可,例如:
<i class="iconoo-home"></i>
<div class="iconoo-home"></div>
<span class="iconoo-home"></span>
<whatever class="iconoo-home"></whatever>
- 如果你使用webpack,那么可以直接使用安装npm包并引入iconoo库即可。
// 安装包
npm i iconoo
// 通过webpack引入
require('iconoo');
PS:
-
设置font-size可等比缩放图标,同时保持线宽不变,默认值为20px(图标宽高为30px)
-
设置zoom或者transform scale可等比缩放图标,线宽也同时变大
-
如果需要改变线宽和其他全局属性,请下载源码,更改variables.sass内的相应变量
iconoo
iconoo is an icon pack that needs no external resources. iconoo is base on icono, and it is flexible, and you don't need to calculate any diamesion.
How to use
- Download the css file and link it to your page, then use these class in every tag you want, like these:
<i class="iconoo-home"></i>
<div class="iconoo-home"></div>
<span class="iconoo-home"></span>
<whatever class="iconoo-home"></whatever>
- if you use webpack,then you can install iconoo via npm and import into your app like this:
npm i iconoo
require('iconoo');
PS: You can simple adjust the size of icons by setting its font-size, of course you can also scale icons by zoom or transform: scale.
Available classes
-
iconoo-pin
-
iconoo-locationArrow
-
iconoo-sync
-
iconoo-reset
-
iconoo-share
-
iconoo-search
-
iconoo-home
-
iconoo-bars
-
iconoo-ellipsis
-
iconoo-tiles
-
iconoo-list
-
iconoo-smile
-
iconoo-frown
-
iconoo-meh
-
iconoo-volume
-
iconoo-volumeLow
-
iconoo-volumeMedium
-
iconoo-volumeHigh
-
iconoo-volumeDecrease
-
iconoo-volumeIncrease
-
iconoo-volumeMute
-
iconoo-play
-
iconoo-pause
-
iconoo-stop
-
iconoo-rewind
-
iconoo-forward
-
iconoo-next
-
iconoo-previous
-
iconoo-rightArrow
-
iconoo-leftArrow
-
iconoo-upArrow
-
iconoo-downArrow
-
iconoo-check
-
iconoo-checkCircle
-
iconoo-cross
-
iconoo-crossCircle
-
iconoo-plus
-
iconoo-plusCircle
-
iconoo-caretRight
-
iconoo-caretLeft
-
iconoo-caretUp
-
iconoo-caretDown
-
iconoo-caretRightCircle
-
iconoo-caretLeftCircle
-
iconoo-caretUpCircle
-
iconoo-caretDownCircle
-
iconoo-caretRightSquare
-
iconoo-caretLeftSquare
-
iconoo-caretUpSquare
-
iconoo-caretDownSquare
Development & Contributing
Using npm install the dependencies:
$ npm install
Run Gulp
$ gulp