README.md (3541B)
1 [Open Iconic v1.1.1](https://github.com/iconic/open-iconic) 2 =========== 3 4 ### Open Iconic is the open source sibling of [Iconic](https://github.com/iconic/open-iconic). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](https://github.com/iconic/open-iconic) 5 6 7 8 ## What's in Open Iconic? 9 10 * 223 icons designed to be legible down to 8 pixels 11 * Super-light SVG files - 61.8 for the entire set 12 * SVG sprite—the modern replacement for icon fonts 13 * Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats 14 * Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats 15 * PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px. 16 17 18 ## Getting Started 19 20 #### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](https://github.com/iconic/open-iconic) and [Reference](https://github.com/iconic/open-iconic) sections. 21 22 ### General Usage 23 24 #### Using Open Iconic's SVGs 25 26 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). 27 28 ``` 29 <img src="/open-iconic/svg/icon-name.svg" alt="icon name"> 30 ``` 31 32 #### Using Open Iconic's SVG Sprite 33 34 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. 35 36 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.* 37 38 ``` 39 <svg class="icon"> 40 <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use> 41 </svg> 42 ``` 43 44 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. 45 46 ``` 47 .icon { 48 width: 16px; 49 height: 16px; 50 } 51 ``` 52 53 Coloring icons is even easier. All you need to do is set the `fill` rule on the `<use>` tag. 54 55 ``` 56 .icon-account-login { 57 fill: #f00; 58 } 59 ``` 60 61 To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/). 62 63 #### Using Open Iconic's Icon Font... 64 65 66 ##### …with Bootstrap 67 68 You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}` 69 70 71 ``` 72 <link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet"> 73 ``` 74 75 76 ``` 77 <span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span> 78 ``` 79 80 ##### …with Foundation 81 82 You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}` 83 84 ``` 85 <link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet"> 86 ``` 87 88 89 ``` 90 <span class="fi-icon-name" title="icon name" aria-hidden="true"></span> 91 ``` 92 93 ##### …on its own 94 95 You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}` 96 97 ``` 98 <link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet"> 99 ``` 100 101 ``` 102 <span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span> 103 ``` 104 105 106 ## License 107 108 ### Icons 109 110 All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT). 111 112 ### Fonts 113 114 All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web).