quickcss
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>基础css - 快切</title>
<meta name="keywords" content="快切,中文css框架,css框架,开源css框架,css框架下载"/>
<meta name="description" content="快切是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。"/>
<meta name="author" content="快切 kuai.qietu.com">
<link rel="stylesheet" href="assets/css/quick.css">
<link rel="stylesheet" href="css/addons.css">
<!--[if ie 6]>
<link rel="stylesheet" href="assets/css/ie6.css">
<![endif]-->
<!--[if lt IE 9]>
<script src="assets/js/html5.js"></script>
<![endif]-->
<script src="assets/js/jquery-1.3.2.min.js"></script>
<script src="assets/js/quick.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<div class="naver">
  <div class="wrapper">
    <div class="brand"> <a href="./index.html"><img src="imgs/logo.png"/></a> </div>
    <div class="collapse"><span></span><span></span><span></span></div>
    <div class="module">
      <ul>
        <li> <strong><a href="started.html">入门</a></strong> </li>
        <li> <strong><a href="grid.html">12列栅格</a></strong> </li>
        <li> <strong><a href="base.html">基础css</a></strong> </li>
        <li> <strong><a href="widget.html">组件</a></strong> </li>
        <li> <strong><a href="javascript.html">javascript插件</a></strong> </li>
                <li class="selected">
                    <strong><a href="icon.html">图标</a></strong>                </li>
      </ul>
    </div>
    <div class="sub"> <a href="http://kuai.qietu.com">前往官网</a> </div>
  </div>
</div>
<div class="heading">
  <div class="wrapper">
    <h1>图标</h1>
    <h2>基于css3 @font-face自定义字体技术。基于开源图标网站glyphicon，图标可改变大小，调整颜色。</h2>
  </div>
</div>
<style type="text/css">
    .icons{}
	.icons .icon{ float:none; display:block; text-align:center; font-size: 24px;}
	.icons p{border: 1px solid #DDDDDD;
    font-size: 12px;
    height: 60px;
    line-height: 1.4;
    margin: 0 0 20px 0;
    padding: 10px;
    text-align: center; display:block;}
</style>
<div class="wrapper icons">
  <h1 class="phead">图标<small>图标基于css3 @font-face自定义字体，通过加载glyphicon图标字体来完成各种图标实现。图标icon的种类之多基本可以满足所有的网站需要。 </small></h1>
  <div class="row">
    <div class="col1"><p><i class="icon icon-adjust"></i>.icon .icon-adjust</p></div>
    <div class="col1"><p><i class="icon icon-align-center"></i>.icon .icon-align-center</p></div>
    <div class="col1"><p><i class="icon icon-align-justify"></i>.icon .icon-align-justify</p></div>
    <div class="col1"><p><i class="icon icon-align-left"></i>.icon .icon-align-left</p></div>
    <div class="col1"><p><i class="icon icon-align-right"></i>.icon .icon-align-right</p></div>
    <div class="col1"><p><i class="icon icon-arrow-down"></i>.icon .icon-arrow-down</p></div>
    <div class="col1"><p><i class="icon icon-arrow-left"></i>.icon .icon-arrow-left</p></div>
    <div class="col1"><p><i class="icon icon-arrow-right"></i>.icon .icon-arrow-right</p></div>
    <div class="col1"><p><i class="icon icon-arrow-up"></i>.icon .icon-arrow-up</p></div>
    <div class="col1"><p><i class="icon icon-asterisk"></i>.icon .icon-asterisk</p></div>
    <div class="col1"><p><i class="icon icon-backward"></i>.icon .icon-backward</p></div>
    <div class="col1"><p><i class="icon icon-ban-circle"></i>.icon .icon-ban-circle</p></div>
    <div class="col1"><p><i class="icon icon-barcode"></i>.icon .icon-barcode</p></div>
    <div class="col1"><p><i class="icon icon-bell"></i>.icon .icon-bell</p></div>
    <div class="col1"><p><i class="icon icon-bold"></i>.icon .icon-bold</p></div>
    <div class="col1"><p><i class="icon icon-book"></i>.icon .icon-book</p></div>
    <div class="col1"><p><i class="icon icon-bookmark"></i>.icon .icon-bookmark</p></div>
    <div class="col1"><p><i class="icon icon-briefcase"></i>.icon .icon-briefcase</p></div>
    <div class="col1"><p><i class="icon icon-bullhorn"></i>.icon .icon-bullhorn</p></div>
    <div class="col1"><p><i class="icon icon-calendar"></i>.icon .icon-calendar</p></div>
    <div class="col1"><p><i class="icon icon-camera"></i>.icon .icon-camera</p></div>
    <div class="col1"><p><i class="icon icon-certificate"></i>.icon .icon-certificate</p></div>
    <div class="col1"><p><i class="icon icon-check"></i>.icon .icon-check</p></div>
    <div class="col1"><p><i class="icon icon-chevron-down"></i>.icon .icon-chevron-down</p></div>
    <div class="col1"><p><i class="icon icon-chevron-left"></i>.icon .icon-chevron-left</p></div>
    <div class="col1"><p><i class="icon icon-chevron-right"></i>.icon .icon-chevron-right</p></div>
    <div class="col1"><p><i class="icon icon-chevron-up"></i>.icon .icon-chevron-upe</p></div>
    <div class="col1"><p><i class="icon icon-circle-arrow-down"></i>.icon .icon-circle-arrow-down</p></div>
    <div class="col1"><p><i class="icon icon-circle-arrow-left"></i>.icon .icon-circle-arrow-left</p></div>
    <div class="col1"><p><i class="icon icon-circle-arrow-right"></i>.icon .icon-circle-arrow-right</p></div>
    <div class="col1"><p><i class="icon icon-circle-arrow-up"></i>.icon .icon-circle-arrow-up</p></div>
    <div class="col1"><p><i class="icon icon-cloud"></i>.icon .icon-cloud</p></div>
    <div class="col1"><p><i class="icon icon-cloud-download"></i>.icon .icon-cloud-download</p></div>
    <div class="col1"><p><i class="icon icon-cloud-upload"></i>.icon .icon-cloud-upload</p></div>
    <div class="col1"><p><i class="icon icon-cog"></i>.icon .icon-cog</p></div>
    <div class="col1"><p><i class="icon icon-collapse-down"></i>.icon .icon-collapse-down</p></div>
    <div class="col1"><p><i class="icon icon-collapse-up"></i>.icon .icon-collapse-up</p></div>
    <div class="col1"><p><i class="icon icon-comment"></i>.icon .icon-comment</p></div>
    <div class="col1"><p><i class="icon icon-compressed"></i>.icon .icon-compressed</p></div>
    <div class="col1"><p><i class="icon icon-copyright-mark"></i>.icon .icon-copyright-mark</p></div>
    <div class="col1"><p><i class="icon icon-credit-card"></i>.icon .icon-credit-card</p></div>
    <div class="col1"><p><i class="icon icon-cutlery"></i>.icon .icon-cutlery</p></div>
    <div class="col1"><p><i class="icon icon-dashboard"></i>.icon .icon-dashboard</p></div>
    <div class="col1"><p><i class="icon icon-download"></i>.icon .icon-download</p></div>
    <div class="col1"><p><i class="icon icon-download-alt"></i>.icon .icon-download-alt</p></div>
    <div class="col1"><p><i class="icon icon-earphone"></i>.icon .icon-earphone</p></div>
    <div class="col1"><p><i class="icon icon-edit"></i>.icon .icon-edit</p></div>
    <div class="col1"><p><i class="icon icon-eject"></i>.icon .icon-eject</p></div>
    <div class="col1"><p><i class="icon icon-envelope"></i>.icon .icon-envelope</p></div>
    <div class="col1"><p><i class="icon icon-euro"></i>.icon .icon-euro</p></div>
    <div class="col1"><p><i class="icon icon-exclamation-sign"></i>.icon .icon-exclamation-sign</p></div>
    <div class="col1"><p><i class="icon icon-expand"></i>.icon .icon-expand</p></div>
    <div class="col1"><p><i class="icon icon-export"></i>.icon .icon-export</p></div>
    <div class="col1"><p><i class="icon icon-eye-close"></i>.icon .icon-eye-close</p></div>
    <div class="col1"><p><i class="icon icon-eye-open"></i>.icon .icon-eye-open</p></div>
    <div class="col1"><p><i class="icon icon-facetime-video"></i>.icon .icon-facetime-video</p></div>
    <div class="col1"><p><i class="icon icon-fast-backward"></i>.icon .icon-fast-backward</p></div>
    <div class="col1"><p><i class="icon icon-fast-forward"></i>.icon .icon-fast-forward</p></div>
    <div class="col1"><p><i class="icon icon-file"></i>.icon .icon-file</p></div>
    <div class="col1"><p><i class="icon icon-film"></i>.icon .icon-film</p></div>
    <div class="col1"><p><i class="icon icon-filter"></i>.icon .icon-filter</p></div>
    <div class="col1"><p><i class="icon icon-fire"></i>.icon .icon-fire</p></div>
    <div class="col1"><p><i class="icon icon-flag"></i>.icon .icon-flag</p></div>
    <div class="col1"><p><i class="icon icon-flash"></i>.icon .icon-flash</p></div>
    <div class="col1"><p><i class="icon icon-floppy-disk"></i>.icon .icon-floppy-disk</p></div>
    <div class="col1"><p><i class="icon icon-floppy-open"></i>.icon .icon-floppy-open</p></div>
    <div class="col1"><p><i class="icon icon-floppy-remove"></i>.icon .icon-floppy-remove</p></div>
    <div class="col1"><p><i class="icon icon-floppy-save"></i>.icon .icon-floppy-save</p></div>
    <div class="col1"><p><i class="icon icon-floppy-saved"></i>.icon .icon-floppy-saved</p></div>
    <div class="col1"><p><i class="icon icon-folder-close"></i>.icon .icon-folder-close</p></div>
    <div class="col1"><p><i class="icon icon-folder-open"></i>.icon .icon-folder-open</p></div>
    <div class="col1"><p><i class="icon icon-font"></i>.icon .icon-font</p></div>
    <div class="col1"><p><i class="icon icon-forward"></i>.icon .icon-forward</p></div>
    <div class="col1"><p><i class="icon icon-fullscreen"></i>.icon .icon-fullscreen</p></div>
    <div class="col1"><p><i class="icon icon-gbp"></i>.icon .icon-gbp</p></div>
    <div class="col1"><p><i class="icon icon-gift"></i>.icon .icon-gift</p></div>
    <div class="col1"><p><i class="icon icon-glass"></i>.icon .icon-glass</p></div>
    <div class="col1"><p><i class="icon icon-globe"></i>.icon .icon-globe</p></div>
    <div class="col1"><p><i class="icon icon-hand-down"></i>.icon .icon-hand-down</p></div>
    <div class="col1"><p><i class="icon icon-hand-left"></i>.icon .icon-hand-left</p></div>
    <div class="col1"><p><i class="icon icon-hand-right"></i>.icon .icon-hand-right</p></div>
    <div class="col1"><p><i class="icon icon-hand-up"></i>.icon .icon-hand-up</p></div>
    <div class="col1"><p><i class="icon icon-hd-video"></i>.icon .icon-hd-video</p></div>
    <div class="col1"><p><i class="icon icon-hdd"></i>.icon .icon-hdd</p></div>
    <div class="col1"><p><i class="icon icon-header"></i>.icon .icon-header</p></div>
    <div class="col1"><p><i class="icon icon-headphones"></i>.icon .icon-headphones</p></div>
    <div class="col1"><p><i class="icon icon-heart"></i>.icon .icon-heart</p></div>
    <div class="col1"><p><i class="icon icon-heart-empty"></i>.icon .icon-heart-empty</p></div>
    <div class="col1"><p><i class="icon icon-home"></i>.icon .icon-home</p></div>
    <div class="col1"><p><i class="icon icon-import"></i>.icon .icon-import</p></div>
    <div class="col1"><p><i class="icon icon-inbox"></i>.icon .icon-inbox</p></div>
    <div class="col1"><p><i class="icon icon-indent-left"></i>.icon .icon-indent-left</p></div>
    <div class="col1"><p><i class="icon icon-indent-right"></i>.icon .icon-indent-right</p></div>
    <div class="col1"><p><i class="icon icon-info-sign"></i>.icon .icon-info-sign</p></div>
    <div class="col1"><p><i class="icon icon-italic"></i>.icon .icon-italic</p></div>
    <div class="col1"><p><i class="icon icon-leaf"></i>.icon .icon-leaf</p></div>
    <div class="col1"><p><i class="icon icon-link"></i>.icon .icon-link</p></div>
    <div class="col1"><p><i class="icon icon-list"></i>.icon .icon-list</p></div>
    <div class="col1"><p><i class="icon icon-list-alt"></i>.icon .icon-list-alt</p></div>
    <div class="col1"><p><i class="icon icon-lock"></i>.icon .icon-lock</p></div>
    <div class="col1"><p><i class="icon icon-log-in"></i>.icon .icon-log-in</p></div>
    <div class="col1"><p><i class="icon icon-log-out"></i>.icon .icon-log-out</p></div>
    <div class="col1"><p><i class="icon icon-magnet"></i>.icon .icon-magnet</p></div>
    <div class="col1"><p><i class="icon icon-map-marker"></i>.icon .icon-map-marker</p></div>
    <div class="col1"><p><i class="icon icon-minus"></i>.icon .icon-minus</p></div>
    <div class="col1"><p><i class="icon icon-minus-sign"></i>.icon .icon-minus-sign</p></div>
    <div class="col1"><p><i class="icon icon-move"></i>.icon .icon-move</p></div>
    <div class="col1"><p><i class="icon icon-music"></i>.icon .icon-music</p></div>
    <div class="col1"><p><i class="icon icon-new-window"></i>.icon .icon-new-window</p></div>
    <div class="col1"><p><i class="icon icon-off"></i>.icon .icon-off</p></div>
    <div class="col1"><p><i class="icon icon-ok"></i>.icon .icon-ok</p></div>
    <div class="col1"><p><i class="icon icon-ok-circle"></i>.icon .icon-ok-circle</p></div>
    <div class="col1"><p><i class="icon icon-ok-sign"></i>.icon .icon-ok-sign</p></div>
    <div class="col1"><p><i class="icon icon-open"></i>.icon .icon-open</p></div>
    <div class="col1"><p><i class="icon icon-paperclip"></i>.icon .icon-paperclip</p></div>
    <div class="col1"><p><i class="icon icon-pause"></i>.icon .icon-pause</p></div>
    <div class="col1"><p><i class="icon icon-pencil"></i>.icon .icon-pencil</p></div>
    <div class="col1"><p><i class="icon icon-phone"></i>.icon .icon-phone</p></div>
    <div class="col1"><p><i class="icon icon-phone-alt"></i>.icon .icon-phone-alt</p></div>
    <div class="col1"><p><i class="icon icon-picture"></i>.icon .icon-picture</p></div>
    <div class="col1"><p><i class="icon icon-plane"></i>.icon .icon-plane</p></div>
    <div class="col1"><p><i class="icon icon-play"></i>.icon .icon-play</p></div>
    <div class="col1"><p><i class="icon icon-play-circle"></i>.icon .icon-play-circle</p></div>
    <div class="col1"><p><i class="icon icon-plus"></i>.icon .icon-plus</p></div>
    <div class="col1"><p><i class="icon icon-plus-sign"></i>.icon .icon-plus-sign</p></div>
    <div class="col1"><p><i class="icon icon-print"></i>.icon .icon-print</p></div>
    <div class="col1"><p><i class="icon icon-pushpin"></i>.icon .icon-pushpin</p></div>
    <div class="col1"><p><i class="icon icon-qrcode"></i>.icon .icon-qrcode</p></div>
    <div class="col1"><p><i class="icon icon-question-sign"></i>.icon .icon-question-sign</p></div>
    <div class="col1"><p><i class="icon icon-random"></i>.icon .icon-random</p></div>
    <div class="col1"><p><i class="icon icon-record"></i>.icon .icon-record</p></div>
    <div class="col1"><p><i class="icon icon-refresh"></i>.icon .icon-refresh</p></div>
    <div class="col1"><p><i class="icon icon-registration-mark"></i>.icon .icon-registration-mark</p></div>
    <div class="col1"><p><i class="icon icon-remove"></i>.icon .icon-remove</p></div>
    <div class="col1"><p><i class="icon icon-remove-circle"></i>.icon .icon-remove-circle</p></div>
    <div class="col1"><p><i class="icon icon-remove-sign"></i>.icon .icon-remove-sign</p></div>
    <div class="col1"><p><i class="icon icon-repeat"></i>.icon .icon-repeat</p></div>
    <div class="col1"><p><i class="icon icon-resize-full"></i>.icon .icon-resize-full</p></div>
    <div class="col1"><p><i class="icon icon-resize-horizontal"></i>.icon .icon-resize-horizontal</p></div>
    <div class="col1"><p><i class="icon icon-resize-small"></i>.icon .icon-resize-small</p></div>
    <div class="col1"><p><i class="icon icon-resize-vertical"></i>.icon .icon-resize-vertical</p></div>
    <div class="col1"><p><i class="icon icon-retweet"></i>.icon .icon-retweet</p></div>
    <div class="col1"><p><i class="icon icon-road"></i>.icon .icon-road</p></div>
    <div class="col1"><p><i class="icon icon-save"></i>.icon .icon-save</p></div>
    <div class="col1"><p><i class="icon icon-saved"></i>.icon .icon-saved</p></div>
    <div class="col1"><p><i class="icon icon-screenshot"></i>.icon .icon-screenshot</p></div>
    <div class="col1"><p><i class="icon icon-sd-video"></i>.icon .icon-sd-video</p></div>
    <div class="col1"><p><i class="icon icon-search"></i>.icon .icon-search</p></div>
    <div class="col1"><p><i class="icon icon-send"></i>.icon .icon-send</p></div>
    <div class="col1"><p><i class="icon icon-share"></i>.icon .icon-share</p></div>
    <div class="col1"><p><i class="icon icon-share-alt"></i>.icon .icon-share-alt</p></div>
    <div class="col1"><p><i class="icon icon-shopping-cart"></i>.icon .icon-shopping-cart</p></div>
    <div class="col1"><p><i class="icon icon-signal"></i>.icon .icon-signal</p></div>
    <div class="col1"><p><i class="icon icon-sort"></i>.icon .icon-sort</p></div>
    <div class="col1"><p><i class="icon icon-sort-by-alphabet"></i>.icon .icon-sort-by-alphabet</p></div>
    <div class="col1"><p><i class="icon icon-sort-by-alphabet-alt"></i>.icon .icon-sort-by-alphabet-alt</p></div>
    <div class="col1"><p><i class="icon icon-sort-by-attributes"></i>.icon .icon-sort-by-attributes</p></div>
    <div class="col1"><p><i class="icon icon-sort-by-attributes-alt"></i>.icon .icon-sort-by-attributes-alt</p></div>
    <div class="col1"><p><i class="icon icon-sort-by-order"></i>.icon .icon-sort-by-order</p></div>
    <div class="col1"><p><i class="icon icon-sort-by-order-alt"></i>.icon .icon-sort-by-order-alt</p></div>
    <div class="col1"><p><i class="icon icon-sound-5-1"></i>.icon .icon-sound-5-1</p></div>
    <div class="col1"><p><i class="icon icon-sound-6-1"></i>.icon .icon-sound-6-1</p></div>
    <div class="col1"><p><i class="icon icon-sound-7-1"></i>.icon .icon-sound-7-1</p></div>
    <div class="col1"><p><i class="icon icon-sound-dolby"></i>.icon .icon-sound-dolby</p></div>
    <div class="col1"><p><i class="icon icon-sound-stereo"></i>.icon .icon-sound-stereo</p></div>
    <div class="col1"><p><i class="icon icon-star"></i>.icon .icon-star</p></div>
    <div class="col1"><p><i class="icon icon-star-empty"></i>.icon .icon-star-empty</p></div>
    <div class="col1"><p><i class="icon icon-stats"></i>.icon .icon-stats</p></div>
    <div class="col1"><p><i class="icon icon-step-backward"></i>.icon .icon-step-backward</p></div>
    <div class="col1"><p><i class="icon icon-step-forward"></i>.icon .icon-step-forward</p></div>
    <div class="col1"><p><i class="icon icon-stop"></i>.icon .icon-stop</p></div>
    <div class="col1"><p><i class="icon icon-subtitles"></i>.icon .icon-subtitles</p></div>
    <div class="col1"><p><i class="icon icon-tag"></i>.icon .icon-tag</p></div>
    <div class="col1"><p><i class="icon icon-tags"></i>.icon .icon-tags</p></div>
    <div class="col1"><p><i class="icon icon-tasks"></i>.icon .icon-tasks</p></div>
    <div class="col1"><p><i class="icon icon-text-height"></i>.icon .icon-text-height</p></div>
    <div class="col1"><p><i class="icon icon-text-width"></i>.icon .icon-text-width</p></div>
    <div class="col1"><p><i class="icon icon-th"></i>.icon .icon-th</p></div>
    <div class="col1"><p><i class="icon icon-th-large"></i>.icon .icon-th-large</p></div>
    <div class="col1"><p><i class="icon icon-th-list"></i>.icon .icon-th-list</p></div>
    <div class="col1"><p><i class="icon icon-thumbs-down"></i>.icon .icon-thumbs-down</p></div>
    <div class="col1"><p><i class="icon icon-thumbs-up"></i>.icon .icon-thumbs-up</p></div>
    <div class="col1"><p><i class="icon icon-time"></i>.icon .icon-time</p></div>
    <div class="col1"><p><i class="icon icon-tint"></i>.icon .icon-tint</p></div>
    <div class="col1"><p><i class="icon icon-tower"></i>.icon .icon-tower</p></div>
    <div class="col1"><p><i class="icon icon-transfer"></i>.icon .icon-transfer</p></div>
    <div class="col1"><p><i class="icon icon-trash"></i>.icon .icon-trash</p></div>
    <div class="col1"><p><i class="icon icon-tree-conifer"></i>.icon .icon-tree-conifer</p></div>
    <div class="col1"><p><i class="icon icon-tree-deciduous"></i>.icon .icon-tree-deciduous</p></div>
    <div class="col1"><p><i class="icon icon-unchecked"></i>.icon .icon-unchecked</p></div>
    <div class="col1"><p><i class="icon icon-upload"></i>.icon .icon-upload</p></div>
    <div class="col1"><p><i class="icon icon-usd"></i>.icon .icon-usd</p></div>
    <div class="col1"><p><i class="icon icon-user"></i>.icon .icon-user</p></div>
    <div class="col1"><p><i class="icon icon-volume-down"></i>.icon .icon-volume-down</p></div>
    <div class="col1"><p><i class="icon icon-volume-off"></i>.icon .icon-volume-off</p></div>
    <div class="col1"><p><i class="icon icon-volume-up"></i>.icon .icon-volume-up</p></div>
    <div class="col1"><p><i class="icon icon-warning-sign"></i>.icon .icon-warning-sign</p></div>
    <div class="col1"><p><i class="icon icon-wrench"></i>.icon .icon-wrench</p></div>
    <div class="col1"><p><i class="icon icon-zoom-in"></i>.icon .icon-zoom-in</p></div>
    <div class="col1"><p><i class="icon icon-zoom-out"></i>.icon .icon-zoom-out</p></div>
  </div>
</div>

<div class="wrapper footer">
  <p>&copy; CopyRight 2002-2013, 快切 kuai.qietu.com, Inc.All Rights Reserved.<br/>
    代码基于<a href="http://www.apache.org/licenses/LICENSE-2.0" rel="nofollow" target="_blank">Apache License v2.0</a>, 文档基于创作共享的 <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="nofollow" target="_blank">署名-非商业使用-相同方 式分享 2.5</a> 协议发布</p>
</div>
</body>
</html>