A Flexible Pure CSS Icon Pack! One Tag One Icon! https://qieguo2016.github.io/iconoo/
CSS HTML JavaScript
Latest commit 9323414 Nov 13, 2016 @qieguo2016 other
Permalink
Failed to load latest commit information.
.github add readme image Oct 27, 2016
build add readme image Oct 27, 2016
dist add npmignore Oct 26, 2016
sass update to 1.0.0 Oct 30, 2016
.gitattributes new Oct 20, 2016
.gitignore new Oct 20, 2016
.npmignore update to 1.0.0 Oct 30, 2016
README.md Update README.md Oct 31, 2016
gulpfile.js repack css Nov 3, 2016
index.html repack css Nov 3, 2016
index.js add textalign Oct 25, 2016
license Create license Oct 21, 2016
package.json other Nov 13, 2016

README.md

iconoo

NPM version Downloads Dependency status Dev Dependency status

iconoo是一个纯CSS的图标库,基于 icono 改造而成,增加了整体缩放功能(线宽不变)和webpack引入方式。

LIVE DEMO

iconoo

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.

LIVE DEMO

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