iconoo是一个纯CSS的图标库,基于 icono 改造而成,增加了整体缩放功能(线宽不变)和webpack引入方式。
- 下载 后直接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 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.
- 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.
iconoo-piniconoo-locationArrowiconoo-synciconoo-reseticonoo-shareiconoo-searchiconoo-homeiconoo-barsiconoo-ellipsisiconoo-tilesiconoo-listiconoo-smileiconoo-frowniconoo-mehiconoo-volumeiconoo-volumeLowiconoo-volumeMediumiconoo-volumeHighiconoo-volumeDecreaseiconoo-volumeIncreaseiconoo-volumeMuteiconoo-playiconoo-pauseiconoo-stopiconoo-rewindiconoo-forwardiconoo-nexticonoo-previousiconoo-rightArrowiconoo-leftArrowiconoo-upArrowiconoo-downArrowiconoo-checkiconoo-checkCircleiconoo-crossiconoo-crossCircleiconoo-plusiconoo-plusCircleiconoo-caretRighticonoo-caretLefticonoo-caretUpiconoo-caretDowniconoo-caretRightCircleiconoo-caretLeftCircleiconoo-caretUpCircleiconoo-caretDownCircleiconoo-caretRightSquareiconoo-caretLeftSquareiconoo-caretUpSquareiconoo-caretDownSquare
Using npm install the dependencies:
$ npm install
Run Gulp
$ gulp