├── LICENSE ├── README.md ├── css ├── demo.css └── iconfont.css ├── fonts ├── iconfont.eot ├── iconfont.svg ├── iconfont.ttf └── iconfont.woff ├── index.html └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2 | 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## iconpark [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 2 | Collection of iconfonts 3 | 4 | ### List of iconfonts 5 | 6 | | Complex | URL | 7 | | ----|--------| 8 | |Font-Awesome|| 9 | |ICONFONT.CN|| 10 | |octicons|| 11 | |fontello|| 12 | |Iconic|| 13 | |ionicons|| 14 | |icomoon|| 15 | |Font Custom|| 16 | |elusive-iconfont|| 17 | |Fontelico|| 18 | |font-icons|| 19 | |foundation-icon-fonts|| 20 | |mfglabs-iconset|| 21 | |Flaticon|| 22 | |fontastic|| 23 | |typicons|| 24 | |websymbols|| 25 | |entypo|| 26 | |Raphaël Icon-Set|| 27 | |batch|| 28 | |weloveiconfonts|| 29 | |openwebicons|| 30 | |webhostinghub-glyphs|| 31 | |Icons8|| 32 | | **Social icon** | **URL** | 33 | |social-icon-font|| 34 | |stackicons|| 35 | |css-social-buttons|| 36 | |fontdiao|| 37 | |RONDO|| 38 | | **Weather icon** | **URL** | 39 | |weather-icons|| 40 | |meteocons|| 41 | |forecastfont|| 42 | | **Map icon** | **URL** | 43 | |Map Icons|| 44 | |GeoBats|| 45 | |EyesAsia|| 46 | |stateface|| 47 | |**iOS 7 icon**| **URL**| 48 | |iOS7-icon-font|| 49 | |7-stroke|| 50 | 51 | 52 | ### Example 53 | 54 | ``` 55 | . 56 | ├── LICENSE 57 | ├── README.md 58 | ├── css 59 | │   ├── demo.css 60 | │   └── iconfont.css 61 | ├── fonts 62 | │   ├── iconfont.eot 63 | │   ├── iconfont.svg 64 | │   ├── iconfont.ttf 65 | │   └── iconfont.woff 66 | └── index.html 67 | ``` 68 | 69 | ```css 70 | @font-face {font-family: "iconfont"; 71 | src: url('../fonts/iconfont.eot'); /* IE9*/ 72 | src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 73 | url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */ 74 | url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 75 | url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ 76 | } 77 | .iconfont { 78 | font-family:"iconfont" !important; 79 | font-size:16px; 80 | font-style:normal; 81 | -webkit-font-smoothing: antialiased; 82 | -webkit-text-stroke-width: 0.2px; 83 | -moz-osx-font-smoothing: grayscale; 84 | } 85 | ``` 86 | 87 | ```html 88 | 89 |
QQ
90 | 91 | 92 |
facebook
93 | ``` 94 | 95 | This is a [DEMO](http://lvwzhen.github.io/iconpark/) 96 | 97 | ### Contributing 98 | - Fork this repo 99 | - Clone your repo 100 | - Checkout a feature branch 101 | - Feel free to add your features 102 | - Make sure your features are fully tested 103 | - Open a pull request, and enjoy <3 104 | 105 | ### MIT license 106 | Copyright (c) 2014 lvwzhen 107 | 108 | Permission is hereby granted, free of charge, to any person obtaining a copy 109 | of this software and associated documentation files (the "Software"), to deal 110 | in the Software without restriction, including without limitation the rights 111 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 112 | copies of the Software, and to permit persons to whom the Software is 113 | furnished to do so, subject to the following conditions: 114 | 115 | The above copyright notice and this permission notice shall be included in 116 | all copies or substantial portions of the Software. 117 | 118 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 119 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 120 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 121 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 122 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 123 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 124 | THE SOFTWARE. 125 | 126 | --- 127 | ![docor](https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/doctor.png) 128 | built upon love by [docor](https://github.com/turingou/docor.git) v0.1.3 129 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main {padding: 30px 100px;} 60 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 61 | 62 | .helps{margin-top:40px;} 63 | .helps pre{ 64 | padding:20px; 65 | margin:10px 0; 66 | border:solid 1px #e7e1cd; 67 | background-color: #fffdef; 68 | overflow: auto; 69 | } 70 | 71 | .icon_lists li{ 72 | float:left; 73 | width: 100px; 74 | height:150px; 75 | text-align: center; 76 | } 77 | .icon_lists .icon{ 78 | font-size: 42px; 79 | line-height: 100px; 80 | margin: 10px 0; 81 | color:#333; 82 | -webkit-transition: font-size 0.25s ease-out 0s; 83 | -moz-transition: font-size 0.25s ease-out 0s; 84 | transition: font-size 0.25s ease-out 0s; 85 | 86 | } 87 | .icon_lists .icon:hover{ 88 | font-size: 100px; 89 | } 90 | -------------------------------------------------------------------------------- /css/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('../fonts/iconfont.eot'); /* IE9*/ 4 | src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */ 6 | url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 7 | url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -webkit-text-stroke-width: 0.2px; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | .icon-xinlang:before { content: "\e600"; } 20 | 21 | .icon-QQ:before { content: "\e601"; } 22 | 23 | .icon-weixin:before { content: "\e602"; } 24 | 25 | .icon-facebook:before { content: "\e603"; } 26 | 27 | .icon-twitter:before { content: "\e604"; } 28 | 29 | -------------------------------------------------------------------------------- /fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lvwzhen/iconpark/5bf75ac61f5a5c20c9b82fa6a7f5e5f6d9215f1a/fonts/iconfont.eot -------------------------------------------------------------------------------- /fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Mon Jun 30 23:14:06 2014 6 | By Ads 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 36 | 45 | 54 | 59 | 62 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lvwzhen/iconpark/5bf75ac61f5a5c20c9b82fa6a7f5e5f6d9215f1a/fonts/iconfont.ttf -------------------------------------------------------------------------------- /fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lvwzhen/iconpark/5bf75ac61f5a5c20c9b82fa6a7f5e5f6d9215f1a/fonts/iconfont.woff -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | IconFont 5 | 6 | 7 | 8 | 9 |
10 |

IconFont 图标

11 |
    12 | 13 |
  • 14 | 15 |
    新浪
    16 |
    &#xe600;
    17 |
    • 18 | 19 |
  • 20 | 21 |
    QQ
    22 |
    &#xe601;
    23 |
    • 24 | 25 |
  • 26 | 27 |
    微信
    28 |
    &#xe602;
    29 |
    • 30 | 31 |
  • 32 | 33 |
    facebook
    34 |
    &#xe603;
    35 |
    • 36 | 37 |
  • 38 | 39 |
    twitter
    40 |
    &#xe604;
    41 |
    • 42 | 43 |
44 | 45 | 46 |
47 | 第一步：使用font-face声明字体 48 | 
49 | @font-face {font-family: 'iconfont';
50 |     src: url('iconfont.eot'); /* IE9*/
51 |     src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
52 |     url('iconfont.woff') format('woff'), /* chrome、firefox */
53 |     url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
54 |     url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
55 | }
56 |
57 | 第二步：定义使用iconfont的样式 58 | 
59 | .iconfont{
60 |     font-family:"iconfont" !important;
61 |     font-size:16px;font-style:normal;
62 |     -webkit-font-smoothing: antialiased;
63 |     -webkit-text-stroke-width: 0.2px;
64 |     -moz-osx-font-smoothing: grayscale;}
65 |
66 | 第三步：挑选相应图标并获取字体编码，应用于页面 67 | 
68 | <i class="iconfont">&#x33</i>
69 |
70 |
71 | 72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iconpark", 3 | "version": "0.0.1", 4 | "description": "Collection of iconfonts", 5 | "main": "index.js", 6 | "author": "lvwzhen", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/lvwzhen/iconpark.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/lvwzhen/iconpark/issues" 14 | }, 15 | "keywords": [ 16 | "icon", 17 | "iconfont", 18 | "css" 19 | ], 20 | "dependencies":{ 21 | "optimist": "*", 22 | "swig": "*", 23 | "consoler": "*" 24 | } 25 | } 26 | --------------------------------------------------------------------------------