html+tup等比缩放,iconoo是一个纯CSS的图标库,基于 icono 改造而成

iconoo

625332134c6f4d4600884b99daebf603.png625332134c6f4d4600884b99daebf603.png625332134c6f4d4600884b99daebf603.png

iconoo是一个纯CSS的图标库,基于 webpack引入方式。

625332134c6f4d4600884b99daebf603.png

How to use

如果你使用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

How to use

Download the css file and link it to your page, then use these class in every tag you want, like these:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值