<!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
左右分隔风格-团队介绍网页模板-源码-响应式网站源码.7z （140个子文件） 
helpers.css 2.04MB bootstrap.css 169KB animate.css 72KB ionicons.css 56KB ionicons.min.css 50KB bootstrap-grid.css 44KB font-awesome.min.css 30KB style.css 5KB bootstrap-reboot.css 4KB slick-theme.css 2KB slick.css 2KB _icon-fonts.css 383B fontawesome-webfont.eot 162KB ionicons.eot 118KB slick.eot 2KB
ajax-loader.gif 4KB
cheatsheet.html 1.22MB what-we-do.html 5KB index.html 5KB about.html 5KB contact.html 4KB
img_1.jpg 191KB bg_1.jpg 162KB img_3.jpg 98KB img_2.jpg 86KB img_4.jpg 84KB img_5.jpg 83KB person_1.jpg 47KB person_5.jpg 36KB person_2.jpg 30KB jquery.min.js 262KB bootstrap.min.js 50KB jquery.mb.YTPlayer.min.js 44KB slick.min.js 42KB popper.min.js 19KB jquery.stellar.min.js 12KB jquery.waypoints.min.js 9KB jquery.easing.1.3.js 8KB main.js 5KB google-map.js 3KB style.css.map 17KB _variables.scss 29KB helpers.scss 26KB _reboot.scss 11KB _forms.scss 10KB _normalize.scss 8KB _custom-forms.scss 7KB _navbar.scss 6KB slick-theme.scss 5KB _button-group.scss 5KB _input-group.scss 4KB _popover.scss 4KB _card.scss 4KB _carousel.scss 4KB _breakpoints.scss 4KB _modal.scss 4KB style.scss 3KB _dropdown.scss 3KB _tables.scss 3KB _list-group.scss 3KB _functions.scss 3KB _tooltip.scss 3KB _buttons.scss 3KB _flex.scss 2KB _print.scss 2KB _nav.scss 2KB _type.scss 2KB _buttons.scss 2KB slick.scss 2KB _forms.scss 2KB _gradients.scss 2KB _pagination.scss 2KB _spacing.scss 1KB _icon-fonts.scss 1KB _grid-framework.scss 1KB _grid.scss 1KB _custom.scss 1KB _code.scss 1KB _images.scss 1KB _text.scss 1KB _breadcrumb.scss 1KB _display.scss 1KB _borders.scss 1KB _image.scss 1KB _alert.scss 1KB _hover.scss 1KB _grid.scss 1KB _mixins.scss 994B _badge.scss 985B bootstrap.scss 888B _progress.scss 837B _screen-reader.scss 773B _embed.scss 727B _responsive-embed.scss 727B _border-radius.scss 722B _close.scss 705B _table-row.scss 647B bootstrap-grid.scss 578B _list-group.scss 546B _reset-text.scss 518B共 140 条
- 1
- 2
资源评论
master_chenchengg
- 粉丝: 1w+
- 资源: 2177
最新资源
- 机器学习逻辑回归完成员工离职预测
- W25Q64-FLASH
- 基于SpringBoot框架的餐饮商家管理系统设计源码
- 基于C#编程的Minecraft简易材质包生成器设计源码
- 基于深度学习技术的Vue框架在线学生成绩与学业发展分析系统设计源码
- 基于OneOS操作系统的SMx加密算法组件设计源码
- 基于Html语言的LinysBrowser_NEXT鸿蒙浏览器设计源码
- Comsol光子晶体微腔及其傅里叶变分析 包含comsol和fdtd模型，以及matlab代码等
- 基于微信公众号的在线培训平台录播直播系统设计源码
- 物联网智能开关平台服务端硬件端、安卓端和前端源码 源代码 程序 智能开关平台，包含服务端、硬件端、安卓端和前端 关键词：智能家居、物联网开关、远程开关、红外线遥控开关、WIFI继电器、MQTT协议、
- 基于Java、Vue的开放式一物一码溯源防伪系统设计源码
- 潮汐发电，永磁同步发电机，变速运行，采用MTPA控制，独特的弱磁曲线，提高起始转矩，调速范围宽 同时附赠id=0控制永磁同步电机控制 波形理想
- 基于C语言的violin调式转换练琴设计源码
- 基于Vue框架的掌上医院uniapp设计源码
- 基于Vue.js框架的3D翻转效果会员卡/粉丝卡设计源码，包含反光特效与响应式布局
- 图像分割语义分割unet、 deeplab3、FCN、Resnet网络等 基于pytorch框架制作 全套项目，包含网络模型，训练代码，预测代码，直接下载数据集就能跑，拿上就能用，简单又省事
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
