Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qieguo2016/iconoo
A Flexible Pure CSS Icon Pack! One Tag One Icon! https://qieguo2016.github.io/iconoo/
https://github.com/qieguo2016/iconoo
Last synced: 2 months ago
JSON representation
A Flexible Pure CSS Icon Pack! One Tag One Icon! https://qieguo2016.github.io/iconoo/
- Host: GitHub
- URL: https://github.com/qieguo2016/iconoo
- Owner: qieguo2016
- License: mit
- Created: 2016-10-20T11:23:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-12T09:44:38.000Z (over 7 years ago)
- Last Synced: 2024-08-10T00:10:45.425Z (5 months ago)
- Language: CSS
- Homepage:
- Size: 181 KB
- Stars: 168
- Watchers: 4
- Forks: 37
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
- awesome-github-star - iconoo
README
# iconoo
[](https://github.com/qieguo2016/iconoo) [](https://github.com/qieguo2016/iconoo/stargazers) [](https://raw.githubusercontent.com/qieguo2016/iconoo/master/license)
**iconoo**是一个纯CSS的图标库，基于 **[icono][1]** 改造而成，增加了整体缩放功能（线宽不变）和`webpack`引入方式。
**[LIVE DEMO][2]**
![iconoo][3]
## How to use
- **[下载][4]** 后直接link引入css文件，然后直接在标签中引入相应的class即可，例如：
``
`
`
``
``
- 如果你使用webpack，那么可以直接使用安装npm包并引入iconoo库即可。
```bash
// 安装包
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][1]**, and it is flexible, and you don't need to calculate any diamesion.
[LIVE DEMO][2]
## How to use
- [Download][3] 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:
```bash
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.
[1]:https://github.com/saeedalipoor/icono
[2]:https://qieguo2016.github.io/iconoo/
[3]:https://github.com/qieguo2016/iconoo/blob/master/.github/iconoo.png
[4]:https://github.com/qieguo2016/iconoo/blob/master/dist/iconoo.min.css
------
## 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