[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).
没有合适的资源?快使用搜索试试~ 我知道了~
温泉-源码
共247个文件
js:44个
png:44个
ts:31个
需积分: 5 0 下载量 55 浏览量
2021-02-24
06:44:25
上传
评论
收藏 1.8MB ZIP 举报
温馨提示
温泉
资源详情
资源评论
资源推荐
收起资源包目录
温泉-源码 (247个子文件)
.browserslistrc 703B
.browserslistrc 30B
.browserslistrc 30B
Program.cs 692B
SpaSampleBlazorWasm.csproj 719B
bootstrap.min.css 152KB
open-iconic-bootstrap.min.css 9KB
Counter.module.css 1KB
MainLayout.razor.css 1KB
NavMenu.razor.css 1KB
app.css 861B
App.css 593B
App.css 564B
index.css 368B
index.css 366B
.editorconfig 272B
.editorconfig 121B
open-iconic.eot 28KB
FONT-LICENSE 4KB
.gitignore 7KB
.gitignore 631B
.gitignore 333B
.gitignore 310B
.gitignore 304B
.gitignore 304B
.gitignore 231B
.gitignore 19B
.gitignore 13B
.gitignore 13B
.gitkeep 0B
index.html 2KB
index.html 2KB
index.html 912B
index.html 611B
index.html 611B
index.html 586B
index.html 477B
timeline.component.html 184B
languages.component.html 136B
app.component.html 31B
favicon.ico 5KB
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 948B
ICON-LICENSE 1KB
serviceWorker.js 5KB
globals.js 3KB
globals.js 2KB
service-worker.published.js 2KB
Languages.js 2KB
counterSlice.js 1KB
Counter.js 1KB
karma.conf.js 1KB
App.js 1KB
customExecute.js 1KB
customExecute.js 1KB
test-with-pageobjects.js 1KB
homepage.js 1KB
elementCount.js 1KB
test-with-pageobjects.js 1KB
elementCount.js 1KB
homepage.js 985B
protractor.conf.js 860B
registerServiceWorker.js 841B
openHomepage.js 782B
openHomepage.js 764B
openHomepageClass.js 722B
openHomepageClass.js 705B
index.js 634B
.eslintrc.js 624B
index.js 562B
test.js 516B
.eslintrc.js 476B
test.js 465B
App.test.js 373B
example.spec.js 322B
service-worker.js 265B
setupTests.js 260B
main.js 204B
store.js 202B
jest.config.js 138B
index.js 131B
.eslintrc.js 121B
jest.config.js 103B
main.js 90B
babel.config.js 73B
babel.config.js 69B
.eslintrc.js 67B
babel.config.js 66B
package-lock.json 1.44MB
package-lock.json 1.35MB
package-lock.json 681KB
package-lock.json 609KB
package-lock.json 515KB
package-lock.json 466KB
angular.json 3KB
tslint.json 3KB
共 247 条
- 1
- 2
- 3
温暖如故
- 粉丝: 22
- 资源: 4642
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0