-
Notifications
You must be signed in to change notification settings - Fork 2
/
iconfont.html
133 lines (112 loc) · 6.34 KB
/
iconfont.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 阿里巴巴矢量图标库</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="row">
<div class="col-sm-12">
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>阿里巴巴矢量图标库简介</h5>
</div>
<div class="ibox-content">
<p>Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时iconfont.cn平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。</p>
<p>官网地址：<a href="http://www.iconfont.cn/" target="_blank">http://www.iconfont.cn/</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>图标搜索</h5>
</div>
<div class="ibox-content">
<div class="col-md-8 col-md-offset-2 m-t m-b">
<p class="text-center">
<img src="img/iconfont-logo.png">
</p>
<form action="http://www.iconfont.cn/search" target="_blank">
<div class="input-group">
<input type="text" name="q" placeholder="请输入图标名称，支持中英文" class="input-sm form-control"> <span class="input-group-btn">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-primary"> 查找图标</button>
</span>
</div>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>使用教程</h5>
</div>
<div class="ibox-content">
<ul class="list-group clear-list" style="margin-bottom:0;">
<li class="list-group-item fist-item">
<p>
<span class="label label-success">1</span> font-face声明字体
</p>
<pre>@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}</pre>
</li>
<li class="list-group-item">
<p>
<span class="label label-info">2</span> 定义使用iconfont的样式
</p>
<pre>.iconfont{
font-family:"iconfont";
font-size:16px;font-style:normal;
}</pre>
</li>
<li class="list-group-item">
<p>
<span class="label label-primary">3</span> 挑选相应图标并获取字体编码，应用于页面
</p>
<pre><i class="iconfont">&#33</i></pre>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="pull-right">
By：<a href="http://www.zi-han.net" target="_blank">zihan's blog</a>
</div>
<div>
<strong>Copyright</strong> H+ © 2014
</div>
</div>
</div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<!--统计代码，可删除-->
</body>
</html>