├── .gitignore ├── fonts ├── ios7-icon.ttf └── ios7-icon.woff ├── README.md ├── bower.json ├── LICENSE.txt ├── icon.css ├── kraken.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | fonts/.fontcustom-data 3 | fonts/ios7-icon.sfd~ 4 | -------------------------------------------------------------------------------- /fonts/ios7-icon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AKIRA-MIYAKE/iOS7-icon-font/HEAD/fonts/ios7-icon.ttf -------------------------------------------------------------------------------- /fonts/ios7-icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AKIRA-MIYAKE/iOS7-icon-font/HEAD/fonts/ios7-icon.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | iOS7-icon-font 2 | ============== 3 | This is a Web-fonts of iOS7 icons. 4 | 5 | 6 | A webfont of iOS 7 icons, based on Free iOS 7 icons in vector. Original Github Project by AKIRA-MIYAKE. 7 | 8 | Forked to add keywords for easier searching, and roughly sorted by category. 9 | 10 | [Demo](http://akira-miyake.github.io/iOS7-icon-font/) 11 | 12 | ---------- 13 | Original copyright © 2014 AKIRA-MIYAKE 14 | Distributed under the [MIT License][mit]. 15 | 16 | [MIT]: http://www.opensource.org/licenses/mit-license.php 17 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iOS7-icon-font", 3 | "homepage": "https://github.com/AKIRA-MIYAKE/iOS7-icon-font", 4 | "authors": [ 5 | "AKIRA-MIYAKE" 6 | ], 7 | "description": "A webfont of iOS 7 icons, based on Free iOS 7 icons in vector. Original Github Project by AKIRA-MIYAKE.", 8 | "main": "icon.css", 9 | "keywords": [ 10 | "iOS", 11 | "icon", 12 | "font" 13 | ], 14 | "license": "MIT", 15 | "ignore": [ 16 | "**/.*", 17 | "node_modules", 18 | "bower_components", 19 | "test", 20 | "tests" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 AKIRA-MIYAKE 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /icon.css: -------------------------------------------------------------------------------- 1 | /* iOS7-icon-font 2 | * (c) 2014 AKIRA-MIAYEK 3 | * 4 | * jQuery.expandAccordion is freely distributable under the terms of an MIT-style license. 5 | * 6 | *--------------------------------------------------------------------------*/ 7 | 8 | @font-face { 9 | font-family: 'ios7-icon'; 10 | src: url('fonts/ios7-icon.woff') format('woff'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | h2 { 16 | clear: both; 17 | margin-top: 1em; 18 | } 19 | .item { 20 | width: 280px; 21 | float: left; 22 | } 23 | 24 | .icon { 25 | display: inline-block; 26 | font-size: 32px; 27 | font-family: 'ios7-icon'; 28 | margin-right: 20px; 29 | -webkit-text-rendering: geometricPrecision; 30 | -moz-text-rendering: geometricPrecision; 31 | -ms-text-rendering: geometricPrecision; 32 | -o-text-rendering: geometricPrecision; 33 | text-rendering: geometricPrecision; 34 | -webkit-font-smoothing: antialiased; 35 | -moz-font-smoothing: antialiased; 36 | -ms-font-smoothing: antialiased; 37 | -o-font-smoothing: antialiased; 38 | font-smoothing: antialiased; 39 | } 40 | 41 | 42 | .text { 43 | font-size: 18px; 44 | line-height: 32px; 45 | margin-right: 20px; 46 | } 47 | 48 | .name { 49 | font-size: 24px; 50 | line-height: 32px; 51 | } 52 | 53 | 54 | -------------------------------------------------------------------------------- /kraken.css: -------------------------------------------------------------------------------- 1 | /* ============================================================= 2 | 3 | Kraken v2.1 4 | A lightweight front-end boilerplate by Chris Ferdinandi. 5 | http://gomakethings.com 6 | 7 | Free to use under the MIT License. 8 | http://gomakethings.com/mit/ 9 | 10 | 11 | COLORS 12 | Primary (Blue): #0088cc 13 | Secondary (Dark Blue): #005580 14 | Black: #272727 15 | White: #ffffff 16 | Gray: #808080 17 | Light Gray: #e5e5e5 18 | 19 | 20 | FONT STACKS 21 | Sans-Serif (default): "Helvetica Neue", Arial, sans-serif 22 | Serif (suggested): Georgia, Times, serif 23 | Add your own here... 24 | 25 | 26 | TYPOGRAPHIC SCALE 27 | (For math purposes. Actual font sizes in ems.) 28 | 4px, 5px, 8px, 10px, 11px, 14px, 15px, 17px (base), 20px, 23px, 26px, 30px, 34px, 51px, 68px, 85px, 102px 29 | 30 | * ============================================================= */ 31 | 32 | 33 | /* ============================================================= 34 | CSS RESET 35 | Meyer's CSS Reset, Normalized.css, and custom code. 36 | * ============================================================= */ 37 | 38 | /* Mobile Screen Resizing */ 39 | @-webkit-viewport { width: device-width; zoom: 1.0; } 40 | @-moz-viewport { width: device-width; zoom: 1.0; } 41 | @-ms-viewport { width: device-width; zoom: 1.0; } 42 | @-o-viewport { width: device-width; zoom: 1.0; } 43 | @viewport { width: device-width; zoom: 1.0; } 44 | 45 | /* Remove browser defaults */ 46 | html, body, div, span, applet, object, iframe, 47 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 48 | a, abbr, acronym, address, big, cite, code, 49 | del, dfn, em, img, ins, kbd, q, s, samp, 50 | small, strike, strong, sub, sup, tt, var, 51 | b, u, i, center, 52 | dl, dt, dd, ol, ul, li, 53 | button, fieldset, form, label, legend, 54 | table, caption, tbody, tfoot, thead, tr, th, td, 55 | article, aside, canvas, details, embed, 56 | figure, figcaption, footer, header, hgroup, 57 | menu, nav, output, ruby, section, summary, 58 | time, mark, audio, video { 59 | margin: 0; 60 | padding: 0; 61 | border: 0; 62 | font-family: "Helvetica Neue", Arial, sans-serif; 63 | font-size: 100%; 64 | font: inherit; 65 | vertical-align: baseline; 66 | } 67 | 68 | /* Set display type for HTML5 semantic elements */ 69 | article, aside, details, figcaption, figure, 70 | footer, header, hgroup, menu, nav, section { 71 | display: block; 72 | } 73 | 74 | /* Force scrollbar display to prevent jumping on pages. 75 | * Fix text resize bug on mobile devices. */ 76 | html { 77 | overflow-y: scroll; 78 | -webkit-text-size-adjust: 100%; 79 | -ms-text-size-adjust: 100%; 80 | } 81 | 82 | /* Display audio, canvas, and video elements as inline block elements. */ 83 | audio, canvas, video { 84 | display: inline-block; 85 | *display: inline; 86 | *zoom: 1; 87 | } 88 | 89 | /* Prevent modern browsers from displaying audio without controls. */ 90 | audio:not([controls]) { 91 | display: none; 92 | } 93 | 94 | /* Prevent img and video elements from spilling 95 | * outside of the page on smaller screens. */ 96 | img, video { 97 | max-width: 100%; 98 | height: auto; 99 | } 100 | 101 | /* Prevent iframe, object, and embed elements from 102 | * spilling outside of the page on smaller screens. */ 103 | iframe, object, embed { 104 | max-width: 100%; 105 | } 106 | 107 | /* Prevents IE from making scaled images look like crap */ 108 | img { 109 | -ms-interpolation-mode: bicubic; 110 | } 111 | 112 | /* Address outline inconsistency between Chrome and other browsers. */ 113 | a:focus, 114 | button:focus { 115 | outline: thin dotted; 116 | outline: .294117647em auto -webkit-focus-ring-color; 117 | outline-offset: -.142857143em; 118 | } 119 | 120 | /* Improve readability when focused and also mouse hovered in all browsers. */ 121 | a:hover, a:active { 122 | outline: 0; 123 | } 124 | 125 | 126 | 127 | 128 | 129 | /* ============================================================= 130 | THE GRID 131 | Structure and layout. 132 | * ============================================================= */ 133 | 134 | /* Mobile-first. Single-column layout by default 135 | * Container sets the maximum page width. Adjust as needed. */ 136 | .container { 137 | max-width: 80em; 138 | width: 88%; 139 | margin-left: auto; 140 | margin-right: auto; 141 | } 142 | 143 | 144 | /* Still mostly single-column. 145 | * Grid-third, grid-half, and grid-img 146 | * provide sub-gridding on smaller screens. */ 147 | @media (min-width: 30em) { 148 | 149 | .row { 150 | margin-left: -1.515151515152%; 151 | margin-right: -1.515151515152%; 152 | } 153 | 154 | [class^="grid-"], 155 | [class*=" grid-"] { 156 | float: left; 157 | width:96.969696969697%; 158 | margin-left: 1.515151515152%; 159 | margin-right: 1.515151515152%; 160 | } 161 | 162 | .grid-third { 163 | width: 30.30303030303%; 164 | } 165 | 166 | .grid-half, 167 | .grid-img { 168 | width: 46.969696969697%; 169 | } 170 | 171 | .grid-two-thirds { 172 | width: 63.636363636364%; 173 | } 174 | 175 | /* Reverses order of grid for content choreography */ 176 | .grid-flip { 177 | float: right; 178 | } 179 | 180 | } 181 | 182 | 183 | /* 6-column grid */ 184 | @media (min-width: 40em) { 185 | 186 | .grid-1 { 187 | width: 13.636363636364%; 188 | } 189 | 190 | .grid-2, 191 | .grid-third, 192 | .grid-img { 193 | width: 30.30303030303%; 194 | } 195 | 196 | .grid-3, 197 | .grid-half { 198 | width: 46.969696969697%; 199 | } 200 | 201 | .grid-4, 202 | .grid-two-thirds { 203 | width: 63.636363636364%; 204 | } 205 | 206 | .grid-5 { 207 | width: 80.30303030303%; 208 | } 209 | 210 | .grid-6, 211 | .grid-full { 212 | width: 96.969696969697%; 213 | } 214 | 215 | 216 | /* Offets let you shift grid elements to the right 217 | * but stay aligned to the grid. */ 218 | .offset-1 { 219 | margin-left: 18.181818181818%; 220 | } 221 | 222 | .offset-2 { 223 | margin-left: 34.848484848485%; 224 | } 225 | 226 | .offset-3 { 227 | margin-left: 51.515151515152%; 228 | } 229 | 230 | .offset-4 { 231 | margin-left: 68.181818181818%; 232 | } 233 | 234 | .offset-5 { 235 | margin-left: 84.848484848485%; 236 | } 237 | 238 | } 239 | 240 | 241 | /* Additional gridding for grid-img on bigger screens. 242 | * Adjust as needed. */ 243 | @media (min-width: 60em) { 244 | .grid-img { 245 | width: 13.636363636364%; 246 | } 247 | } 248 | 249 | 250 | 251 | 252 | 253 | /* ============================================================= 254 | TYPOGRAPHY 255 | Sets font styles for entire site. 256 | * ============================================================= */ 257 | 258 | body { 259 | font-family: "Helvetica Neue", Arial, sans-serif; 260 | font-size: 106.25%; 261 | line-height: 1.470588235; 262 | color: #272727; 263 | background: #ffffff; 264 | } 265 | 266 | p { 267 | margin-bottom: 1.529411765em; 268 | } 269 | 270 | @media (min-width: 40em) { 271 | body { 272 | line-height: 1.588235294; 273 | } 274 | } 275 | 276 | 277 | /* Sizes 278 | * For smaller and larger text */ 279 | 280 | .text-small { 281 | font-size: .882352941em; 282 | line-height: 1.533333333; 283 | } 284 | 285 | .text-tall { 286 | font-size: 1.166666667em; 287 | line-height: 1.4; 288 | } 289 | 290 | @media (min-width: 40em) { 291 | .text-tall { 292 | font-size: 1.352941176em; 293 | } 294 | } 295 | 296 | 297 | /* Colors 298 | * For alternate text colors */ 299 | 300 | .text-muted { 301 | color: #808080; 302 | } 303 | 304 | 305 | /* Links 306 | * Hyperlink styling */ 307 | 308 | a { 309 | color: #0088cc; 310 | text-decoration: none; 311 | } 312 | 313 | a:hover { 314 | color: #005580; 315 | text-decoration: underline; 316 | } 317 | 318 | a img { 319 | border: none; 320 | background: none; 321 | } 322 | 323 | /* Prevents border/background on linked image hover. 324 | * Adds slight opacity. */ 325 | a:hover img { 326 | border: none; 327 | background: none; 328 | opacity:0.8; 329 | filter:alpha(opacity=80); 330 | } 331 | 332 | 333 | /* Lists 334 | * Styling for lists */ 335 | 336 | ul, ol { 337 | margin-bottom: 1.529411765em; 338 | margin-left: 2em; 339 | } 340 | 341 | ul ul, ul ol, ol ol, ol ul { 342 | margin-bottom: 0; 343 | } 344 | 345 | ul { 346 | list-style: disc; 347 | } 348 | 349 | ol { 350 | list-style: decimal; 351 | } 352 | 353 | /* Removes list styling. 354 | * For semantic reasons, should only 355 | * be used on unordered lists. */ 356 | .list-unstyled { 357 | margin-left: 0; 358 | list-style: none; 359 | } 360 | 361 | 362 | /* Headings 363 | * h1 through h6 styling 364 | * Heading class lets you use one heading type for semantics 365 | * but style it as another heading type. */ 366 | 367 | h1, h2, h3, h4, h5, h6 { 368 | line-height: 1.2; 369 | font-weight: normal; 370 | margin-bottom: 1em; 371 | padding-top: 1em; 372 | } 373 | 374 | h1, .h1 { 375 | font-size: 1.529411765em; 376 | padding-top: .5em; 377 | } 378 | 379 | h2, .h2 { 380 | font-size: 1.352941176em; 381 | } 382 | 383 | h3, .h3 { 384 | font-size: 1.176470588em; 385 | } 386 | 387 | h4, h5, h6, 388 | .h4, .h5, .h6 { 389 | font-size: .882352941em; 390 | font-style: italic; 391 | } 392 | 393 | h4, .h4 { 394 | text-transform: uppercase; 395 | } 396 | 397 | @media (min-width: 40em) { 398 | h1, .h1 { 399 | font-size: 1.764705882em; 400 | } 401 | } 402 | 403 | 404 | /* Lines, Quotes and Emphasis */ 405 | 406 | /* Lines */ 407 | hr { 408 | margin: 2em auto; 409 | border: 0; 410 | border-top: .071428571em solid #e5e5e5; 411 | border-bottom: .071428571em solid #ffffff; 412 | } 413 | 414 | /* Bold */ 415 | strong { 416 | font-weight: bold; 417 | } 418 | 419 | /* Italics */ 420 | em { 421 | font-style: italic; 422 | } 423 | 424 | /* Subscript & Superscript */ 425 | sub, sup { 426 | position: relative; 427 | font-size: 85%; 428 | font-weight: bold; 429 | line-height: 0; 430 | vertical-align: baseline; 431 | margin-left: .3em; 432 | } 433 | 434 | sup { 435 | top: -0.5em; 436 | } 437 | 438 | sub { 439 | bottom: -0.25em; 440 | } 441 | 442 | /* Highlighting colors */ 443 | ::selection { 444 | color: #ffffff; 445 | background: #0088cc; 446 | } 447 | 448 | ::-moz-selection { 449 | color: #ffffff; 450 | background: #0088cc; 451 | } 452 | 453 | /* Blockquotes */ 454 | blockquote { 455 | border-left: .235294118em solid #e5e5e5; 456 | margin-bottom:1.529411765em; 457 | padding-left: 1.529411765em; 458 | padding-right: 1.529411765em; 459 | } 460 | 461 | blockquote, q { 462 | quotes: none; 463 | } 464 | 465 | blockquote:before, blockquote:after, 466 | q:before, q:after { 467 | content: ''; 468 | content: none; 469 | } 470 | 471 | 472 | 473 | 474 | 475 | /* ============================================================= 476 | CODE 477 | Styling for code and preformatted text. 478 | * ============================================================= */ 479 | 480 | code, pre { 481 | font-family: Menlo, Monaco, "Courier New", monospace; 482 | font-size: .764705882em; 483 | border-radius: .176470588em; 484 | } 485 | 486 | code { 487 | color: #d14; 488 | background-color: #f7f7f9; 489 | padding: .235294118em; 490 | border: .085em solid #e1e1e8; 491 | } 492 | 493 | pre { 494 | display: block; 495 | margin-bottom: 1.529411765em; 496 | line-height: 1.538461538em; 497 | background-color: #f5f5f5; 498 | padding: .5em; 499 | border: .085em solid #ccc; 500 | border-radius: .235294118em; 501 | white-space: pre; 502 | white-space: pre-wrap; 503 | word-break: break-all; 504 | } 505 | 506 | pre code { 507 | padding: 0; 508 | color: inherit; 509 | background-color: transparent; 510 | border: 0; 511 | } 512 | 513 | 514 | 515 | 516 | 517 | /* ============================================================= 518 | BUTTONS 519 | Styling for CSS buttons. 520 | * ============================================================= */ 521 | 522 | .btn { 523 | display: inline-block; 524 | font-size: .882352941em; 525 | padding: .4em .666666667em; 526 | line-height: 1.333333333; 527 | font-weight: normal; 528 | background-color: #808080; 529 | border: .071428571em solid #808080; 530 | border-radius: .235294118em; 531 | margin-left: .3em; 532 | margin-bottom: .3em; 533 | } 534 | 535 | .btn, 536 | .btn:hover, 537 | a .btn:hover { 538 | color: #ffffff; 539 | } 540 | 541 | .btn:hover, 542 | a .btn:hover { 543 | background-color: #595959; 544 | border-color: #595959; 545 | text-decoration: none; 546 | } 547 | 548 | .btn-blue { 549 | background-color: #0088cc; 550 | border-color: #0088cc; 551 | } 552 | 553 | .btn-blue:hover, 554 | a .btn-blue:hover { 555 | background-color: #005580; 556 | border-color: #005580; 557 | } 558 | 559 | .btn:active { 560 | -webkit-box-shadow: inset 0 .142857143em .235294118em rgba(0, 0, 0, 0.15), 0 .071428571em .142857143em rgba(0, 0, 0, 0.05); 561 | box-shadow: inset 0 .142857143em .235294118em rgba(0, 0, 0, 0.15), 0 .071428571em .142857143em rgba(0, 0, 0, 0.05); 562 | outline: 0; 563 | } 564 | 565 | .btn-large { 566 | padding: .588235294em .882352941em; 567 | font-size: 1em; 568 | line-height: normal; 569 | border-radius: .294117647em; 570 | } 571 | 572 | .btn-block, 573 | input[type="submit"].btn-block, 574 | input[type="reset"].btn-block, 575 | input[type="button"].btn-block { 576 | display: block; 577 | width: 100%; 578 | margin-left: 0; 579 | padding-right: 0; 580 | padding-left: 0; 581 | -webkit-box-sizing: border-box; 582 | -moz-box-sizing: border-box; 583 | box-sizing: border-box; 584 | } 585 | 586 | .btn-block + .btn-block { 587 | margin-top: .333333333em; 588 | } 589 | 590 | button, .btn { 591 | cursor: pointer; 592 | text-align: center; 593 | vertical-align: middle; 594 | -webkit-appearance: none; 595 | } 596 | 597 | .btn:first-child, input.btn { 598 | margin-left: 0; 599 | } 600 | 601 | 602 | 603 | 604 | 605 | /* ============================================================= 606 | FORMS 607 | Styling for form elements. 608 | * ============================================================= */ 609 | 610 | form, fieldset { 611 | margin-bottom: 1.529411765em; 612 | } 613 | 614 | legend, label { 615 | display: block; 616 | font-weight: normal; 617 | padding: 0; 618 | margin-bottom: .294117647em; 619 | } 620 | 621 | input, textarea, select { 622 | display: block; 623 | width: 100%; 624 | font: inherit; 625 | line-height: 1.470588235; 626 | color: #555555; 627 | vertical-align: middle; 628 | margin-bottom: 1.176470588em; 629 | padding: .294117647em; 630 | border: .071428571em solid #b8b8b8; 631 | border-radius: .176470588em; 632 | -webkit-box-sizing: border-box; 633 | -moz-box-sizing: border-box; 634 | box-sizing: border-box; 635 | } 636 | 637 | form button, form .btn { 638 | margin-bottom: 1.176470588em; 639 | } 640 | 641 | textarea { 642 | height: 12em; 643 | } 644 | 645 | input[type="image"], 646 | input[type="checkbox"], 647 | input[type="radio"] { 648 | display: inline-block; 649 | width: auto; 650 | height: auto; 651 | padding: 0; 652 | margin-bottom: .294117647em; 653 | cursor: pointer; 654 | } 655 | 656 | input:focus, 657 | textarea:focus { 658 | border-color: rgba(82, 168, 236, 0.8); 659 | -webkit-box-shadow: inset 0 .071428571em .071428571em rgba(0, 0, 0, 0.075), 0 0 .470588235em rgba(82, 168, 236, 0.6); 660 | box-shadow: inset 0 .071428571em .071428571em rgba(0, 0, 0, 0.075), 0 0 .470588235em rgba(82, 168, 236, 0.6); 661 | outline: 0; 662 | outline: thin dotted \9; 663 | } 664 | 665 | input[type="file"]:focus, 666 | input[type="checkbox"]:focus, 667 | select:focus { 668 | outline: thin dotted; 669 | outline: .294117647em auto -webkit-focus-ring-color; 670 | outline-offset: -.117647059em; 671 | } 672 | 673 | 674 | /* Inline Inputs */ 675 | .input-inline { 676 | display: inline; 677 | width: auto; 678 | } 679 | 680 | 681 | /* Condensed Inputs */ 682 | .input-condensed { 683 | line-height: 1; 684 | padding: .117647059em; 685 | } 686 | 687 | 688 | @media (min-width: 40em) { 689 | input, textarea, select { 690 | line-height: 1.588235294; 691 | } 692 | } 693 | 694 | 695 | 696 | 697 | 698 | /* ============================================================= 699 | ICONS 700 | A placeholder for icon fonts. 701 | Learn more at http://gomakethings.com/icon-fonts/ 702 | * ============================================================= */ 703 | 704 | /* @font-face code. Change font names and URLs as need. 705 | * Commented Out. 706 | @font-face { 707 | font-family: 'icomoon'; 708 | src: url('fonts/icomoon.eot'); 709 | src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 710 | url('fonts/icomoon.woff') format('woff'), 711 | url('fonts/icomoon.ttf') format('truetype'), 712 | url('fonts/icomoon.svg#IcoMoon') format('svg'); 713 | font-weight: normal; 714 | font-style: normal; 715 | } 716 | 717 | [class^="icon-"]:before, 718 | [class*=" icon-"]:before { 719 | font-family: 'icomoon'; 720 | font-style: normal; 721 | speak: none; 722 | font-weight: normal; 723 | -webkit-font-smoothing: antialiased; 724 | font-smoothing: antialiased; 725 | text-rendering: optimizeLegibility; 726 | } 727 | */ 728 | 729 | 730 | 731 | 732 | 733 | /* ============================================================= 734 | ADD-ONS PLACEHOLDER 735 | A placeholder for add-on styling. 736 | Expand the functionality of Kraken. 737 | http://cferdinandi.github.io/kraken/addons.html 738 | * ============================================================= */ 739 | 740 | 741 | 742 | 743 | 744 | /* ============================================================= 745 | ALIGNMENT, SPACING & VISIBILITY 746 | Override default alignment, spacing and visibilty. 747 | * ============================================================= */ 748 | 749 | /* Text alignment */ 750 | 751 | .text-center { 752 | text-align: center; 753 | } 754 | 755 | .text-right { 756 | text-align: right; 757 | } 758 | 759 | .text-left { 760 | text-align: left; 761 | } 762 | 763 | 764 | /* Floats */ 765 | 766 | .float-left { 767 | float: left; 768 | } 769 | 770 | .float-center { 771 | float: none; 772 | margin-left: auto; 773 | margin-right: auto; 774 | } 775 | 776 | .float-right { 777 | float: right; 778 | } 779 | 780 | 781 | /* Spacing */ 782 | 783 | .no-space { 784 | margin: 0; 785 | padding: 0; 786 | } 787 | 788 | .no-space-bottom { 789 | margin-bottom: 0; 790 | padding-bottom: 0; 791 | } 792 | 793 | .no-space-top { 794 | margin-top: 0; 795 | padding-top: 0; 796 | } 797 | 798 | .space-bottom { 799 | margin-bottom: 2em; 800 | } 801 | 802 | .space-bottom-small { 803 | margin-bottom: .470588235em; 804 | padding-bottom: 0; 805 | } 806 | 807 | .space-top { 808 | padding-top: .82352941234em; 809 | } 810 | 811 | 812 | /* Screen Reader Text */ 813 | 814 | .screen-reader { 815 | position: absolute; 816 | top: -9999em; 817 | left:-9999em; 818 | } 819 | 820 | 821 | /* Clearfix */ 822 | 823 | .group:before, .group:after, 824 | .container:before, .container:after, 825 | .row:before, .row:after { 826 | display: table; 827 | content: ""; 828 | *zoom: 1; 829 | } 830 | 831 | .group:after, 832 | .container:after, 833 | .row:after { 834 | clear: both; 835 | } 836 | 837 | 838 | 839 | 840 | 841 | /* ============================================================= 842 | PRINT STYLES 843 | Styling for printed content. Adapted from HTML5BP. 844 | http://html5boilerplate.com 845 | * ============================================================= */ 846 | 847 | @media print { 848 | 849 | /* Universal selector. 850 | * Reset all content to transparent background, 851 | * black color, and remove box and text shadows. */ 852 | * { 853 | background: transparent !important; 854 | color: #000 !important; 855 | box-shadow: none !important; 856 | text-shadow: none !important; 857 | } 858 | 859 | /* Specifies page margin */ 860 | @page { 861 | margin: 0.5cm; 862 | } 863 | 864 | /* Underline all links */ 865 | a, a:visited { 866 | text-decoration: underline; 867 | } 868 | 869 | /* Show URL after links */ 870 | a[href]:after { 871 | content: " (" attr(href) ")"; 872 | } 873 | 874 | /* Don't show URL for internal links */ 875 | a[href^="#"]:after { 876 | content: ""; 877 | } 878 | 879 | /* Specifies the minimum number of lines to print at the top and bottom of a page. */ 880 | p, h1, h2, h3 { 881 | orphans: 3; 882 | widows: 3; 883 | } 884 | 885 | /* Avoid inserting a page break after headers */ 886 | h1, h2, h3 { 887 | page-break-after: avoid; 888 | } 889 | 890 | /* Change border color on blockquotes and preformatted text. 891 | * Avoid page breaks inside the content */ 892 | pre, blockquote { 893 | border-color: #999; 894 | page-break-inside: avoid; 895 | } 896 | 897 | /* Displayed as a table header row group */ 898 | thead { 899 | display: table-header-group; 900 | } 901 | 902 | /* Avoid inserting a page break inside table rows and images */ 903 | tr, img { 904 | page-break-inside: avoid; 905 | } 906 | 907 | } 908 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 38 | 39 | 40 |
41 | 42 |

iOS7 icon font

43 |

A webfont of iOS 7 icons, based on Free iOS 7 icons in vector. Original Github Project by AKIRA-MIYAKE.

44 | 45 |

Forked to add keywords for easier searching, and roughly sorted by category.

46 | 47 | 48 | 49 | 50 | 51 |

UI

52 |
53 | #61713 home 54 |
55 |
56 | #61886 settings 57 |
58 |
59 | #61730 info 60 |
61 |
62 | #61780 question 63 |
64 |
65 | #61724 zoomout 66 |
67 |
68 | #61786 zoomin 69 |
70 |
71 | #61788 search 72 |
73 |
74 | #61943 plus 75 |
76 |
77 | #61956 close 78 |
79 |
80 | #61823 star 81 |
82 |
83 | #61885 heart 84 |
85 |
86 | #61749 heartlarge 87 |
88 |
89 | #61907 flag 90 |
91 |
92 | #61919 link 93 |
94 |
95 | #61742 location 96 |
97 |
98 | #61741 time 99 |
100 |
101 | #61756 lock 102 |
103 |
104 | #61937 unlock 105 |
106 |
107 | #61792 key 108 |
109 |
110 | #61733 hand 111 |
112 |
113 | #61845 like 114 |
115 |
116 | #61828 dislike 117 |
118 | 119 | 120 | 121 | 122 |

Arrows

123 |
124 | #61870 up 125 |
126 |
127 | #61812 right 128 |
129 |
130 | #61699 down 131 |
132 |
133 | #61760 left 134 |
135 |
136 | #61865 upright 137 |
138 |
139 | #61778 downright 140 |
141 |
142 | #61832 downleft 143 |
144 |
145 | #61798 upleft 146 |
147 |
148 | #61701 disclose 149 |
150 |
151 | #61736 collapse 152 |
153 |
154 | #61903 previous 155 |
156 |
157 | #61815 next 158 |
159 |
160 | #61839 fullscreen 161 |
162 |
163 | #61773 minimize 164 |
165 |
166 | #61720 export 167 |
168 |
169 | #61853 import 170 |
171 |
172 | #61787 upload 173 |
174 |
175 | #61751 download 176 |
177 |
178 | #61714 reload 179 |
180 |
181 | #61910 refresh 182 |
183 |
184 | #61737 revert 185 |
186 |
187 | #61924 commit 188 |
189 | 190 | 191 |

Curved Arrows

192 | 193 |
194 | #61723 curveNE 195 |
196 |
197 | #61740 curveNW 198 |
199 |
200 | #61771 curveSW 201 |
202 |
203 | #61819 curveEN 204 |
205 |
206 | #61825 curveWS 207 |
208 |
209 | #61807 curveSE 210 |
211 |
212 | #61876 curveES 213 |
214 |
215 | #61899 curveWN 216 |
217 | 218 | 219 | 220 | 221 |

Users

222 |
223 | #61816 woman 224 |
225 |
226 | #61844 man 227 |
228 |
229 | #61708 womanline 230 |
231 |
232 | #61883 manline 233 |
234 |
235 | #61768 womanfill 236 |
237 |
238 | #61822 manfill 239 |
240 |
241 | #61914 womandot 242 |
243 |
244 | #61873 mandot 245 |
246 |
247 | #61887 users 248 |
249 |
250 | #61782 profile 251 |
252 |
253 | #61890 contacts 254 |
255 | 256 | 257 |

Communication

258 | 259 |
260 | #61704 chat 261 |
262 |
263 | #61880 mail 264 |
265 |
266 | #61911 phone 267 |
268 |
269 | #61833 hangup 270 |
271 |
272 | #61830 fax 273 |
274 |
275 | #61799 megaphone 276 |
277 |
278 | #61811 cheer 279 |
280 |
281 | #61940 newspaper 282 |
283 |
284 | #61854 book 285 |
286 |
287 | #61875 sites 288 |
289 | 290 | 291 | 292 |

Technology

293 | 294 |
295 | #61705 iphone 296 |
297 |
298 | #61834 ipad 299 |
300 |
301 | #61729 desktop 302 |
303 |
304 | #61931 videofile 305 |
306 |
307 | #61859 musicfile 308 |
309 |
310 | #61745 music 311 |
312 |
313 | #61765 camera 314 |
315 |
316 | #61824 webcam 317 |
318 |
319 | #61764 charging 320 |
321 |
322 | #61722 charge1 323 |
324 |
325 | #61841 charge2 326 |
327 |
328 | #61945 charge3 329 |
330 |
331 | #61731 charge4 332 |
333 |
334 | #61829 mute 335 |
336 |
337 | #61904 audio1 338 |
339 |
340 | #61921 audio2 341 |
342 |
343 | #61849 audio3 344 |
345 |
346 | #61710 bell 347 |
348 |
349 | #61922 microphone 350 |
351 |
352 | #61848 headset 353 |
354 |
355 | #61915 headphones 356 |
357 |
358 | #61856 video 359 |
360 |
361 | #61934 film 362 |
363 |
364 | #61929 projector 365 |
366 |
367 | #61954 wifi 368 |
369 |
370 | #61779 bluetooth 371 |
372 | 373 | 374 | 375 | 376 |

Commerce

377 | 378 |
379 | #61772 store 380 |
381 |
382 | #61912 cart 383 |
384 |
385 | #61888 cartfull 386 |
387 |
388 | #61762 cartx 389 |
390 |
391 | #61797 cartdown 392 |
393 |
394 | #61951 cartup 395 |
396 |
397 | #61889 cash 398 |
399 |
400 | #61879 creditcard 401 |
402 |
403 | #61938 charge 404 |
405 |
406 | #61709 slot 407 |
408 |
409 | #61795 wallet 410 |
411 |
412 | #61747 purse 413 |
414 |
415 | #61744 briefcase 416 |
417 |
418 | #61700 sack 419 |
420 |
421 | #61814 coins 422 |
423 |
424 | #61817 piggybank 425 |
426 |
427 | #61872 token 428 |
429 |
430 | #61905 gift 431 |
432 |
433 | #61820 tag 434 |
435 |
436 | #61908 priceusd 437 |
438 |
439 | #61821 pricegbp 440 |
441 |
442 | #61920 priceeuro 443 |
444 |
445 | #61860 burst 446 |
447 | 448 | 449 | 450 |

Activities

451 | 452 |
453 | #61953 play 454 |
455 |
456 | #61871 run 457 |
458 |
459 | #61948 hike 460 |
461 |
462 | #61895 climb 463 |
464 |
465 | #61718 row 466 |
467 |
468 | #61781 swim 469 |
470 |
471 | #61755 ski 472 |
473 |
474 | #61878 smoking 475 |
476 |
477 | #61923 nosmoking 478 |
479 | 480 | 481 |

Extracurriculars

482 |
483 | #61935 soccer 484 |
485 |
486 | #61893 basketball 487 |
488 |
489 | #61727 football 490 |
491 |
492 | #61791 tennis 493 |
494 |
495 | #61863 pingpong 496 |
497 |
498 | #61734 puzzle 499 |
500 |
501 | #61702 cards 502 |
503 |
504 | #61696 dice 505 |
506 |
507 | #61902 controller 508 |
509 |
510 | #61803 checkered 511 |
512 |
513 | #61896 jester 514 |
515 |
516 | #61783 graduation 517 |
518 | 519 | 520 | 521 |

Transport

522 |
523 | #61707 bus 524 |
525 |
526 | #61732 cablecar 527 |
528 |
529 | #61843 train 530 |
531 |
532 | #61739 traincar 533 |
534 |
535 | #61757 bicycle 536 |
537 |
538 | #61861 scooter 539 |
540 |
541 | #61810 motorcycle 542 |
543 |
544 | #61775 airplane 545 |
546 |
547 | #61950 takeoff 548 |
549 |
550 | #61850 landing 551 |
552 |
553 | #61851 helicopter 554 |
555 |
556 | #61790 rocket 557 |
558 |
559 | #61898 tractor 560 |
561 |
562 | #61894 truck 563 |
564 |
565 | #61827 delivery 566 |
567 |
568 | #61916 taxi 569 |
570 |
571 | #61866 car 572 |
573 |
574 | #61774 pickup 575 |
576 |
577 | #61842 trailer 578 |
579 |
580 | #61855 ferry 581 |
582 |
583 | #61901 sailboat 584 |
585 |
586 | #61748 yacht 587 |
588 |
589 | #61776 ship 590 |
591 |
592 | #61891 steamer 593 |
594 |
595 | #61789 preserver 596 |
597 |
598 | #61735 wheel 599 |
600 |
601 | #61761 steering 602 |
603 |
604 | #61838 globe 605 |
606 |
607 | #61927 compass 608 |
609 |
610 | #61728 safari 611 |
612 |
613 | #61758 directions 614 |
615 | 616 | 617 |

Files

618 |
619 | #61769 page 620 |
621 |
622 | #61717 copy 623 |
624 |
625 | #61697 paperclip 626 |
627 |
628 | #61784 folder 629 |
630 |
631 | #61882 folderopen 632 |
633 |
634 | #61836 files 635 |
636 |
637 | #61750 box 638 |
639 |
640 | #61804 inbox 641 |
642 |
643 | #61752 airmail 644 |
645 |
646 | #61917 recycle 647 |
648 |
649 | #61918 trash 650 |
651 | 652 | 653 | 654 |

Drawing

655 |
656 | #61698 eye 657 |
658 |
659 | #61913 eyefill 660 |
661 |
662 | #61952 pencil 663 |
664 |
665 | #61763 erase 666 |
667 |
668 | #61706 brush 669 |
670 |
671 | #61840 pen 672 |
673 |
674 | #61711 bezier 675 |
676 |
677 | #61955 text 678 |
679 |
680 | #61703 stroke 681 |
682 |
683 | #61864 fill 684 |
685 |
686 | #61813 flipy 687 |
688 |
689 | #61726 flipx 690 |
691 |
692 | #61802 size 693 |
694 |
695 | #61909 scale 696 |
697 |
698 | #61900 ruler 699 |
700 |
701 | #61858 scissors 702 |
703 |
704 | #61867 crop 705 |
706 |
707 | #61862 picture 708 |
709 | 710 | 711 |

Shapes

712 |
713 | #61754 line 714 |
715 |
716 | #61800 slash 717 |
718 |
719 | #61809 oval 720 |
721 |
722 | #61831 rectangle 723 |
724 |
725 | #61877 diamond 726 |
727 |
728 | #61936 hexagon 729 |
730 |
731 | #61947 male 732 |
733 |
734 | #61715 female 735 |
736 |
737 | #61759 spade 738 |
739 |
740 | #61794 club 741 |
742 | 743 | 744 |

Measurements

745 |
746 | #61753 data 747 |
748 |
749 | #61738 graph 750 |
751 |
752 | #61932 barchart 753 |
754 |
755 | #61721 pie 756 |
757 |
758 | #61868 stopwatch 759 |
760 |
761 | #61725 timer 762 |
763 |
764 | #61766 alarm 765 |
766 |
767 | #61716 gauge 768 |
769 |
770 | #61881 speed 771 |
772 |
773 | #61874 scales 774 |
775 |
776 | #61941 kg 777 |
778 |
779 | #61857 clover 780 |
781 | 782 | 783 | 784 |

Tools

785 |
786 | #61806 toolkit 787 |
788 |
789 | #61906 glasses 790 |
791 |
792 | #61925 brain 793 |
794 |
795 | #61770 lightbulb 796 |
797 |
798 | #61767 flashlight 799 |
800 |
801 | #61926 battery 802 |
803 |
804 | #61777 poles 805 |
806 |
807 | #61897 electricity 808 |
809 |
810 | #61928 rule 811 |
812 |
813 | #61847 measuring 814 |
815 |
816 | #61808 wrench 817 |
818 |
819 | #61933 screw 820 |
821 |
822 | #61785 nut 823 |
824 |
825 | #61712 funnel 826 |
827 |
828 | #61884 windup 829 |
830 | 831 |
832 | 833 | 834 | 835 | --------------------------------------------------------------------------------