[Open Iconic v1.1.1](http://useiconic.com/open)
===========
### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons)
## What's in Open Iconic?
* 223 icons designed to be legible down to 8 pixels
* Super-light SVG files - 61.8 for the entire set
* SVG sprite—the modern replacement for icon fonts
* Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats
* Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats
* PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px.
## Getting Started
#### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections.
### General Usage
#### Using Open Iconic's SVGs
We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute).
```
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
```
#### Using Open Iconic's SVG Sprite
Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `<svg>` *tag and a unique class name for each different icon in the* `<use>` *tag.*
```
<svg class="icon">
<use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
```
Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `<svg>` tag with equal width and height dimensions.
```
.icon {
width: 16px;
height: 16px;
}
```
Coloring icons is even easier. All you need to do is set the `fill` rule on the `<use>` tag.
```
.icon-account-login {
fill: #f00;
}
```
To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/).
#### Using Open Iconic's Icon Font...
##### …with Bootstrap
You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}`
```
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
```
```
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
```
##### …with Foundation
You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}`
```
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
```
```
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
```
##### …on its own
You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}`
```
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
```
```
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
```
## License
### Icons
All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT).
### Fonts
All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web).
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
曲线库LiveCharts2的WPF(.net版本)源码 (2000个子文件)
Package.appxmanifest 2KB
Package.appxmanifest 2KB
Package.appxmanifest 1KB
Package.appxmanifest 1KB
Package.appxmanifest 1KB
View.axaml 5KB
MainView.axaml 3KB
View.axaml 2KB
View.axaml 2KB
View.axaml 2KB
View.axaml 2KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1KB
App.axaml 1KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1KB
View.axaml 1018B
View.axaml 1007B
View.axaml 1002B
View.axaml 998B
View.axaml 995B
View.axaml 986B
View.axaml 982B
UserControl1.axaml 981B
View.axaml 979B
View.axaml 952B
View.axaml 910B
View.axaml 845B
View.axaml 844B
View.axaml 843B
View.axaml 833B
View.axaml 817B
View.axaml 809B
View.axaml 762B
MainWindow.axaml 725B
View.axaml 717B
View.axaml 698B
View.axaml 689B
View.axaml 686B
View.axaml 684B
View.axaml 666B
View.axaml 666B
View.axaml 654B
View.axaml 653B
View.axaml 653B
View.axaml 652B
View.axaml 648B
View.axaml 647B
View.axaml 646B
View.axaml 636B
View.axaml 633B
View.axaml 632B
View.axaml 630B
View.axaml 627B
View.axaml 623B
View.axaml 620B
View.axaml 618B
View.axaml 618B
View.axaml 604B
View.axaml 600B
View.axaml 598B
View.axaml 598B
View.axaml 596B
View.axaml 594B
View.axaml 592B
View.axaml 590B
View.axaml 590B
View.axaml 588B
View.axaml 586B
View.axaml 586B
View.axaml 584B
View.axaml 582B
View.axaml 580B
View.axaml 579B
View.axaml 578B
View.axaml 563B
View.axaml 552B
View.axaml 545B
View.axaml 543B
View.axaml 542B
View.axaml 542B
View.axaml 541B
View.axaml 539B
View.axaml 539B
View.axaml 534B
View.axaml 534B
View.axaml 532B
View.axaml 531B
View.axaml 525B
View.axaml 525B
View.axaml 523B
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
ywqb95
- 粉丝: 9
- 资源: 6
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功