利用css3实现Icon UI图标



7 25 9



特效描述:利用css3实现 Icon UI图标,利用css3实现Icon UI图标

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />

2. HTML代码

<div class="page">
<section class="demo">
<ul class="control_buttons">
			<li>
				<a href="#" class="icon icon-chat">
					<span>
						<em>&nbsp;icon-chat</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-calendar">
					<span>
						<em>&nbsp;icon-calendar</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-move-alt1">
					<span>
						<em>&nbsp;icon-move-alt1</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-loop">
					<span>
						<em>&nbsp;icon-loop</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-up-alt2">
					<span>
						<em>&nbsp;icon-arrow-up-alt2</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-fullscreen-alt">
					<span>
						<em>&nbsp;icon-fullscreen-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-article">
					<span>
						<em>&nbsp;icon-article</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-umbrella">
					<span>
						<em>&nbsp;icon-umbrella</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-chart">
					<span>
						<em>&nbsp;icon-chart</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-chart-alt">
					<span>
						<em>&nbsp;icon-chart-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-read-more">
					<span>
						<em>&nbsp;icon-read-more</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-iphone">
					<span>
						<em>&nbsp;icon-iphone</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-star">
					<span>
						<em>&nbsp;icon-star</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-map-pin-stroke">
					<span>
						<em>&nbsp;icon-map-pin-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-bars">
					<span>
						<em>&nbsp;icon-bars</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-list">
					<span>
						<em>&nbsp;icon-list</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-battery-empty">
					<span>
						<em>&nbsp;icon-battery-empty</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-battery-half">
					<span>
						<em>&nbsp;icon-battery-half</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-battery-full">
					<span>
						<em>&nbsp;icon-battery-full</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-list-nested">
					<span>
						<em>&nbsp;icon-list-nested</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-bars-alt">
					<span>
						<em>&nbsp;icon-bars-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-eye">
					<span>
						<em>&nbsp;icon-eye</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-book">
					<span>
						<em>&nbsp;icon-book</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-map-pin-alt">
					<span>
						<em>&nbsp;icon-map-pin-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-map-pin-fill">
					<span>
						<em>&nbsp;icon-map-pin-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-user">
					<span>
						<em>&nbsp;icon-user</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-battery-charging">
					<span>
						<em>&nbsp;icon-battery-charging</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-book-alt">
					<span>
						<em>&nbsp;icon-book-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-target">
					<span>
						<em>&nbsp;icon-target</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-steering-wheel">
					<span>
						<em>&nbsp;icon-steering-wheel</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-cd">
					<span>
						<em>&nbsp;icon-cd</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-down-alt2">
					<span>
						<em>&nbsp;icon-arrow-down-alt2</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-down-alt1">
					<span>
						<em>&nbsp;icon-arrow-down-alt1</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-down">
					<span>
						<em>&nbsp;icon-arrow-down</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-loop-alt1">
					<span>
						<em>&nbsp;icon-loop-alt1</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-loop-alt2">
					<span>
						<em>&nbsp;icon-loop-alt2</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-loop-alt3">
					<span>
						<em>&nbsp;icon-loop-alt3</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-loop-alt4">
					<span>
						<em>&nbsp;icon-loop-alt4</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-magnifying-glass">
					<span>
						<em>&nbsp;icon-magnifying-glass</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-award-fill">
					<span>
						<em>&nbsp;icon-award-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-move-alt2">
					<span>
						<em>&nbsp;icon-move-alt2</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-equalizer">
					<span>
						<em>&nbsp;icon-equalizer</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-calendar-alt-stroke">
					<span>
						<em>&nbsp;icon-calendar-alt-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-calendar-alt-fill">
					<span>
						<em>&nbsp;icon-calendar-alt-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-share">
					<span>
						<em>&nbsp;icon-share</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-mail">
					<span>
						<em>&nbsp;icon-mail</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-heart-stroke">
					<span>
						<em>&nbsp;icon-heart-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-award-stroke">
					<span>
						<em>&nbsp;icon-award-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-comment-stroke">
					<span>
						<em>&nbsp;icon-comment-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-comment-alt1-fill">
					<span>
						<em>&nbsp;icon-comment-alt1-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-comment-alt1-stroke">
					<span>
						<em>&nbsp;icon-comment-alt1-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-chat-alt-stroke">
					<span>
						<em>&nbsp;icon-chat-alt-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-chat-alt-fill">
					<span>
						<em>&nbsp;icon-chat-alt-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-comment-fill">
					<span>
						<em>&nbsp;icon-comment-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-comment-alt2-fill">
					<span>
						<em>&nbsp;icon-comment-alt2-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-comment-alt2-stroke">
					<span>
						<em>&nbsp;icon-comment-alt2-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-checkmark">
					<span>
						<em>&nbsp;icon-checkmark</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-check-alt">
					<span>
						<em>&nbsp;icon-check-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-x">
					<span>
						<em>&nbsp;icon-x</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-document-fill">
					<span>
						<em>&nbsp;icon-document-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-document-stroke">
					<span>
						<em>&nbsp;icon-document-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-document-alt-fill">
					<span>
						<em>&nbsp;icon-document-alt-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-document-alt-stroke">
					<span>
						<em>&nbsp;icon-document-alt-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-heart-fill">
					<span>
						<em>&nbsp;icon-heart-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-movie">
					<span>
						<em>&nbsp;icon-movie</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-trash-stroke">
					<span>
						<em>&nbsp;icon-trash-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-trash-fill">
					<span>
						<em>&nbsp;icon-trash-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-beaker-alt">
					<span>
						<em>&nbsp;icon-beaker-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-beaker">
					<span>
						<em>&nbsp;icon-beaker</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-transfer">
					<span>
						<em>&nbsp;icon-transfer</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-move-vertical">
					<span>
						<em>&nbsp;icon-move-vertical</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-move-vertical-alt1">
					<span>
						<em>&nbsp;icon-move-vertical-alt1</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-move-vertical-alt2">
					<span>
						<em>&nbsp;icon-move-vertical-alt2</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-move-horizontal">
					<span>
						<em>&nbsp;icon-move-horizontal</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-move-horizontal-alt1">
					<span>
						<em>&nbsp;icon-move-horizontal-alt1</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-move-horizontal-alt2">
					<span>
						<em>&nbsp;icon-move-horizontal-alt2</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-key-fill">
					<span>
						<em>&nbsp;icon-key-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-key-stroke">
					<span>
						<em>&nbsp;icon-key-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-microphone">
					<span>
						<em>&nbsp;icon-microphone</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-compass">
					<span>
						<em>&nbsp;icon-compass</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-book-alt2">
					<span>
						<em>&nbsp;icon-book-alt2</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-download">
					<span>
						<em>&nbsp;icon-download</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-home">
					<span>
						<em>&nbsp;icon-home</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-upload">
					<span>
						<em>&nbsp;icon-upload</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-clock">
					<span>
						<em>&nbsp;icon-clock</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-pen">
					<span>
						<em>&nbsp;icon-pen</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-box">
					<span>
						<em>&nbsp;icon-box</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-headphones">
					<span>
						<em>&nbsp;icon-headphones</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-volume">
					<span>
						<em>&nbsp;icon-volume</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-folder-stroke">
					<span>
						<em>&nbsp;icon-folder-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-pen-alt-stroke">
					<span>
						<em>&nbsp;icon-pen-alt-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-cloud-download">
					<span>
						<em>&nbsp;icon-cloud-download</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-lock-stroke">
					<span>
						<em>&nbsp;icon-lock-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-cloud-upload">
					<span>
						<em>&nbsp;icon-cloud-upload</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-lock-fill">
					<span>
						<em>&nbsp;icon-lock-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-pen-alt-fill">
					<span>
						<em>&nbsp;icon-pen-alt-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-folder-fill">
					<span>
						<em>&nbsp;icon-folder-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-volume-mute">
					<span>
						<em>&nbsp;icon-volume-mute</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-play">
					<span>
						<em>&nbsp;icon-play</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-pause">
					<span>
						<em>&nbsp;icon-pause</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-ampersand">
					<span>
						<em>&nbsp;icon-ampersand</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-at">
					<span>
						<em>&nbsp;icon-at</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-pen-alt2">
					<span>
						<em>&nbsp;icon-pen-alt2</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-brush">
					<span>
						<em>&nbsp;icon-brush</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-unlock-fill">
					<span>
						<em>&nbsp;icon-unlock-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-unlock-stroke">
					<span>
						<em>&nbsp;icon-unlock-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-fork">
					<span>
						<em>&nbsp;icon-fork</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-paperclip">
					<span>
						<em>&nbsp;icon-paperclip</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-tag-stroke">
					<span>
						<em>&nbsp;icon-tag-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-tag-fill">
					<span>
						<em>&nbsp;icon-tag-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-sun-stroke">
					<span>
						<em>&nbsp;icon-sun-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-sun-fill">
					<span>
						<em>&nbsp;icon-sun-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-moon-stroke">
					<span>
						<em>&nbsp;icon-moon-stroke</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-moon-fill">
					<span>
						<em>&nbsp;icon-moon-fill</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-cloud">
					<span>
						<em>&nbsp;icon-cloud</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-rain">
					<span>
						<em>&nbsp;icon-rain</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-aperture-alt">
					<span>
						<em>&nbsp;icon-aperture-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-aperture">
					<span>
						<em>&nbsp;icon-aperture</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-camera">
					<span>
						<em>&nbsp;icon-camera</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-image">
					<span>
						<em>&nbsp;icon-image</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-layers">
					<span>
						<em>&nbsp;icon-layers</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-layers-alt">
					<span>
						<em>&nbsp;icon-layers-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-eyedropper">
					<span>
						<em>&nbsp;icon-eyedropper</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-brush-alt">
					<span>
						<em>&nbsp;icon-brush-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-info">
					<span>
						<em>&nbsp;icon-info</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-question-mark">
					<span>
						<em>&nbsp;icon-question-mark</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-pilcrow">
					<span>
						<em>&nbsp;icon-pilcrow</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-hash">
					<span>
						<em>&nbsp;icon-hash</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-left-quote">
					<span>
						<em>&nbsp;icon-left-quote</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-right-quote">
					<span>
						<em>&nbsp;icon-right-quote</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-left-quote-alt">
					<span>
						<em>&nbsp;icon-left-quote-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-right-quote-alt">
					<span>
						<em>&nbsp;icon-right-quote-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-fullscreen">
					<span>
						<em>&nbsp;icon-fullscreen</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-fullscreen-exit-alt">
					<span>
						<em>&nbsp;icon-fullscreen-exit-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-fullscreen-exit">
					<span>
						<em>&nbsp;icon-fullscreen-exit</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-play-alt">
					<span>
						<em>&nbsp;icon-play-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-last">
					<span>
						<em>&nbsp;icon-last</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-first">
					<span>
						<em>&nbsp;icon-first</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-eject">
					<span>
						<em>&nbsp;icon-eject</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-stop">
					<span>
						<em>&nbsp;icon-stop</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-left">
					<span>
						<em>&nbsp;icon-arrow-left</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-new-window">
					<span>
						<em>&nbsp;icon-new-window</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-plus">
					<span>
						<em>&nbsp;icon-plus</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-x-altx-alt">
					<span>
						<em>&nbsp;icon-x-altx-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-denied">
					<span>
						<em>&nbsp;icon-denied</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-plus-alt">
					<span>
						<em>&nbsp;icon-plus-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-lightbulb">
					<span>
						<em>&nbsp;icon-lightbulb</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-left-alt1">
					<span>
						<em>&nbsp;icon-arrow-left-alt1</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-left-alt2">
					<span>
						<em>&nbsp;icon-arrow-left-alt2</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-spin-alt">
					<span>
						<em>&nbsp;icon-spin-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-minus">
					<span>
						<em>&nbsp;icon-minus</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-cursor">
					<span>
						<em>&nbsp;icon-cursor</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-rss">
					<span>
						<em>&nbsp;icon-rss</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-minus-alt">
					<span>
						<em>&nbsp;icon-minus-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-spin">
					<span>
						<em>&nbsp;icon-spin</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-right">
					<span>
						<em>&nbsp;icon-arrow-right</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-right-alt1">
					<span>
						<em>&nbsp;icon-arrow-right-alt1</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-curved-arrow">
					<span>
						<em>&nbsp;icon-curved-arrow</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-pin">
					<span>
						<em>&nbsp;icon-pin</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-rss-alt">
					<span>
						<em>&nbsp;icon-rss-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-wrench">
					<span>
						<em>&nbsp;icon-wrench</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-dial">
					<span>
						<em>&nbsp;icon-dial</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-cog">
					<span>
						<em>&nbsp;icon-cog</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-move">
					<span>
						<em>&nbsp;icon-move</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-bolt">
					<span>
						<em>&nbsp;icon-bolt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-link">
					<span>
						<em>&nbsp;icon-link</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-undo">
					<span>
						<em>&nbsp;icon-undo</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-reload">
					<span>
						<em>&nbsp;icon-reload</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-reload-alt">
					<span>
						<em>&nbsp;icon-reload-alt</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-up-alt1">
					<span>
						<em>&nbsp;icon-arrow-up-alt1</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-up">
					<span>
						<em>&nbsp;icon-arrow-up</em>
					</span>
				</a>
			</li>
			<li>
				<a href="#" class="icon icon-arrow-right-alt2">
					<span>
						<em>&nbsp;icon-arrow-right-alt2</em>
					</span>
				</a>
			</li> 
</ul>			
	</section>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 文字提示框 提示文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到