<!DOCTYPE html>
<html>
<head>
<title>Ionicons v2.0.0 Cheatsheet</title>
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
background: #fff;
color: #444;
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a, a:visited {
color: #888;
text-decoration: underline;
}
a:hover, a:focus { color: #000; }
header {
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
overflow: hidden;
padding: 20px 0;
}
header h1 {
color: #888;
float: left;
font-size: 36px;
font-weight: 300;
}
header a {
float: right;
font-size: 14px;
}
.container {
margin: 0 auto;
max-width: 1200px;
min-width: 960px;
padding: 0 20px;
width: 95%;
}
.icon-row {
border-bottom: 1px dotted #ccc;
padding: 10px 0 20px;
margin-bottom: 20px;
}
.ion {
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.preview-icon { vertical-align: bottom; }
.preview-scale {
color: #888;
font-size: 12px;
margin-top: 5px;
}
.step {
display: inline-block;
line-height: 1;
position: relative;
width: 10%;
}
.step i {
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.step:hover i { opacity: .3; }
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-32 { font-size: 32px; }
.size-48 { font-size: 48px; }
.size-64 { font-size: 64px; }
.size-96 { font-size: 96px; }
.usage { margin-top: 10px; }
.usage input {
font-family: monospace;
margin-right: 3px;
padding: 2px 5px;
text-align: center;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.usage label {
font-size: 12px;
text-align: right;
padding: 0 3px 0 60px;
}
.usage label:first-child { padding-left: 0; }
.usage .name { width: 180px; }
.usage .html { width: 80px; }
.usage .css { width: 80px; }
footer {
color: #888;
font-size: 12px;
padding: 20px 0;
}
</style>
<link href="css/ionicons.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<header>
<h1>Ionicons v2.0.0 Cheatsheet, 733 icons:</h1>
<p><a href="http://ionicons.com/">Ionicons Homepage</a></p>
</header>
<div class="content">
<div class="icon-row">
<div class="preview-icon"><span class="step size-12">
<i class="icon ion-alert"></i>
</span><span class="step size-14">
<i class="icon ion-alert"></i>
</span><span class="step size-16">
<i class="icon ion-alert"></i>
</span><span class="step size-18">
<i class="icon ion-alert"></i>
</span><span class="step size-21">
<i class="icon ion-alert"></i>
</span><span class="step size-24">
<i class="icon ion-alert"></i>
</span><span class="step size-32">
<i class="icon ion-alert"></i>
</span><span class="step size-48">
<i class="icon ion-alert"></i>
</span><span class="step size-64">
<i class="icon ion-alert"></i>
</span><span class="step size-96">
<i class="icon ion-alert"></i>
</span>
</div>
<div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
<div class="usage">
<label>Classname:</label>
<input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-alert" />
<label>Selectable:</label>
<span class="ion"></span>
<label>Escaped HTML:</label>
<input class="html" type="text" readonly="readonly" onClick="this.select();" value="&#xf101;" />
<label>CSS Content:</label>
<input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f101" />
</div>
</div>
<div class="icon-row">
<div class="preview-icon"><span class="step size-12">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-14">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-16">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-18">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-21">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-24">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-32">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-48">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-64">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-96">
<i class="icon ion-alert-circled"></i>
</span>
</div>
<div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
<div class="usage">
<label>Classname:</label>
<input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-alert-circled" />
<label>Selectable:</label>
<span class="ion"></span>
<label>Escaped HTML:</label>
<input class="html" type="text" readonly="readonly" onClick="this.select();" value="&#xf100;" />
<label>CSS Content:</label>
<input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f100" />
</div>
</div>
<div class="icon-row">
<div class="preview-icon"><span class="step size-12">
<i class="icon ion-android-add"></i>
</span><span class="step size-14">
<i class="icon ion-android-add"></i>
</span><span class="step size-16">
<i class="icon ion-android-add"></i>
</span><span class="step size-18">
<i class="icon ion-android-add"></i>
</span><span class="step size-21">
<i class="icon ion-android-add"></i>
</span><span class="step size-24">
<i class="icon ion-android-add"></i>
</span><span class="step size-32">
<i class="icon ion-android-add"></i>
</span><span class="step size-48">
<i class="icon ion-android-add"></i>
</span><span class="step size-64">
<i class="icon ion-android-add"></i>
</span><span class="step size-96">
<i class="icon ion-android-add"></i>
</span>
</div>
<div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
<div class="usage">
<label>Classname:</label>
<input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-add" />
<label>Se
休闲放松旅行服务响应式网站模板-适配移动端-HTML源码.zip （155个子文件） 
bootstrap.css 192KB bootstrap.min.css 156KB ionicons.css 56KB ionicons.min.css 50KB bootstrap-grid.css 45KB style.css 38KB font-awesome.min.css 30KB aos.css 25KB animate.css 24KB bootstrap-datepicker.css 18KB fancybox.min.css 14KB magnific-popup.css 7KB bootstrap-reboot.css 5KB owl.carousel.min.css 3KB jquery.timepicker.css 2KB _custom.css 0B fontawesome-webfont.eot 162KB ionicons.eot 118KB
cheatsheet.html 1.22MB index.html 48KB
hero_3.jpg 713KB hero_1.jpg 596KB hero_2.jpg 340KB hero_4.jpg 254KB person_2.jpg 162KB hero_5.jpg 157KB image_6.jpg 121KB image_7.jpg 117KB slider-3.jpg 109KB img_4.jpg 109KB food-1.jpg 96KB slider-4.jpg 94KB person_1.jpg 78KB person_3.jpg 76KB img_3.jpg 69KB slider-2.jpg 68KB slider-6.jpg 64KB img_2.jpg 62KB img_5.jpg 58KB image_5.jpg 56KB slider-7.jpg 55KB slider-1.jpg 52KB slider-5.jpg 44KB img_1.jpg 44KB person_4.jpg 25KB jquery-3.3.1.min.js 85KB jquery.fancybox.min.js 60KB bootstrap.min.js 50KB bootstrap-datepicker.js 46KB owl.carousel.min.js 42KB jquery.validate.min.js 23KB jquery.magnific-popup.min.js 20KB popper.min.js 19KB jquery.timepicker.min.js 15KB jquery.stellar.min.js 12KB aos.js 12KB jquery-migrate-3.0.1.min.js 11KB jquery.waypoints.min.js 9KB jquery.easing.1.3.js 8KB main.js 6KB bootstrap.css.map 72KB
about_feature_image.png 649KB round.png 57KB _variables.scss 38KB style.scss 29KB _custom-forms.scss 12KB _reboot.scss 11KB _forms.scss 9KB _navbar.scss 6KB _card.scss 6KB _input-group.scss 5KB _carousel.scss 5KB _modal.scss 5KB _popover.scss 4KB _breakpoints.scss 4KB _dropdown.scss 4KB _button-group.scss 4KB _tables.scss 3KB _forms.scss 3KB _buttons.scss 3KB _print.scss 3KB _list-group.scss 3KB _flex.scss 3KB _buttons.scss 3KB _functions.scss 3KB _tooltip.scss 2KB _type.scss 2KB _gradients.scss 2KB _nav.scss 2KB _grid-framework.scss 2KB _pagination.scss 2KB _grid.scss 2KB _text.scss 2KB _borders.scss 2KB _caret.scss 1KB _display.scss 1KB _spacing.scss 1KB _breadcrumb.scss 1KB _image.scss 1KB _alert.scss 1KB共 155 条
- 1
- 2
资源评论
DTcode7
- 粉丝: 3w+
- 资源: 4986
最新资源
- 基于集成学习Bagging算法的集成模型数据回归预测：matlab代码实例与应用分析,基于集成模型的Bagging的数据回归预测 matlab代码 ,核心关键词：基于集成模型的Bagging; 数据
- Java毕设项目：基于spring+mybatis+maven+mysql实现的婚恋网站管理系统【含源码+数据库+毕业论文】
- 大学生活动社交小程序-活动资源
- kis-flow-活动资源
- Matlab机械臂综合仿真平台：涵盖运动学、动力学与控制，基于Simulink的轨迹规划与GUI控制仿真,Matlab机械臂综合仿真平台，包含运动学、动力学和控制 MATLAB机器人仿真正逆运动学s
- 校园社团活动报名- Java+小程序-活动资源
- 基于LABVIEW实现三菱PLC FX5U以太网通讯VI的XYMD数据读写实战项目,LABVIEW三菱PLC FX5U以太网通讯VI 项目实用，读写D数据，其他部分可自行添加，这个是框架 ,LABV
- 大学生活动社交小程序-活动资源
- 基于S7-200PLC的豆浆机流量控制详解：梯形图程序、接线图与组态画面,S7-200 MCGS 基于S7-200PLC的豆浆机流量控制 带解释的梯形图程序，接线图原理图图纸，io分配，组态画面 ,核
- 基于PLC的矿井通风安全控制系统S7-200实践教程：梯形图程序解析、接线图与原理图、IO分配及组态画面详解,S7-200 MCGS 基于PLC的矿井通风安全控制系统 带解释的梯形图程序，接线图原理图
- Java毕设项目：基于spring+mybatis+maven+mysql实现的在线交友论坛管理系统【含源码+数据库+毕业论文】
- 三菱PLC与组态王协同构建隧道照明及煤矿安全控制系统：梯形图程序、接线图与组态画面全解析,三菱plc和组态王制作隧道照明控制系统，巷道照明系统，煤矿安全照明 带解释的梯形图程序，接线图原理图图纸，io
- 基于S7-200 PLC的汽车自动清洗机控制系统详解：梯形图程序、接线图与组态画面全解析,S7-200 MCGS 基于S7-200西门子PLC汽车自动清洗机控制系统 带解释的梯形图程序，接线图原理图图
- 基于RS485通讯的西门子S7-200SMART PLC一拖二恒压供水系统自动化解决方案,西门子基于RS485通讯恒压供水一拖二S7-200SMART-PLC 程序样例为一拖二恒压供水，采样S7-20
- axmol-cocos资源
- LabVIEW通用框架：满足多数上位机软件功能需求，简洁直观的设计方案,LabVIEW 通用框架，满足绝大部分上位机软件功能要求，简单直观 ,核心关键词：LabVIEW 通用框架; 上位机软件功能
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
