jQuery按钮点击loading加载代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery按钮点击loading加载代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<title>jQuery按钮点击loading加载</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/loda-button.css" />

	<style type="text/css">
		body {
			font-size: 100%;
			margin:    1em 5em 5em;
  		font-family: 'Lucida Grande', sans-serif;
  		text-align: center;
		}

		h1 {
			margin-top: 1.2em;
			margin-bottom:  0;
			padding-bottom: 0;
		}

		h2 {
			font-size: 1em;
			color:     #888;
			margin:    0 0 4em;
			padding:   0;
		}

		.logo {
  		margin-top: 0;
  	}

  	.logo a, .logo a:link, .logo a:visited {
  		color: #aaa;
  		font-size: .4em;
  		font-weight: normal;
  		text-decoration: none;
  		text-transform: uppercase;
  		letter-spacing: 1em;
  		transition: all .5s;
  	}

  	.logo a:hover {
  		color: #000;
  	}

  	.loda-btn {
  		margin: 0 2em 2em 0;
  	}

  	.container {
  		max-width: 50em;
  		margin: 0 auto;
  	}
		
	</style>
</head>
<body>
<br>
	<div class="container">		

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-lock"></span>
			Lock
		</a>

		<a href = "#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-drawer"></span> Archive
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-upload"></span> Upload
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-download"></span> Download
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-connection"></span> Connect
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-user"></span> User
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-search"></span> Search
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-phone"></span>
			Phone
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-star"></span>
			Star
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-remove"></span>
			Remove
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-mail"></span>
			Mail
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-flickr"></span>
			Flickr
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-share"></span>
			Share
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-file-pdf"></span>
			PDF
		</a>

		<a href="#" class="loda-btn">
			<span aria-hidden="true" class="loda-icon icon-disk"></span>
			Save
		</a>

	</div>
	


	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/loda-button.js"></script>

	<script type="text/javascript">

		$('.loda-btn')
			.lodaButton()

			.click(function(e) {

				e.preventDefault();

				var _self = $(this);
				_self.lodaButton('start');

				setTimeout(function() {
					_self.lodaButton('stop');
				}, 2000);

			});
	</script>
</body>
</html>

JS代码(loda-button.js):

(function ($){
	var methods ={
	start:function (){
	var loda = getData(this);
	if (loda) loda.start();
}
,stop:function (){
	var loda = getData(this);
	if (loda) loda.stop();
}
}
,getData = function(el){
	return el.data('loda-button-data');
}
,setData = function(el,data){
	el.data('loda-button-data',data);
}
,LodaButton = function(element){
	this._element = element;
	this._jelement = $(element);
	if (getData(this._jelement)) return;
	setData(this._jelement,this);
}
;
	LodaButton.prototype ={
	start:function(){
	this._jelement.addClass('loda-btn-loading');
}
,stop:function(){
	this._jelement.removeClass('loda-btn-loading');
}
}
;
	$.fn.lodaButton = function(options){
	if (methods[options]){
	return methods[options].apply(this,Array.prototype.slice.call(arguments,1));
}
else if (typeof options === 'object' || !options){
	return this.each(function(){
	new LodaButton(this);
	return this;
}
);
}
else{
	$.error( 'Method ' + options + ' does not exist on lodaButton' );
}
}
;
}
(jQuery));

CSS代码(style.css):

@font-face{font-family:'icomoon';src:url('fonts/icomoon.eot');src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),url('fonts/icomoon.woff') format('woff'),url('fonts/icomoon.ttf') format('truetype'),url('fonts/icomoon.svg#icomoon') format('svg');font-weight:normal;font-style:normal;}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before{font-family:'icomoon';content:attr(data-icon);speak:none;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;}
/* Use the following CSS code if you want to have a class per icon */
/*Instead of a list of all class selectors,you can use the generic selector below,but it's slower:[class*="icon-"]{*/
.icon-home,.icon-home-2,.icon-home-3,.icon-office,.icon-newspaper,.icon-pencil,.icon-pencil-2,.icon-quill,.icon-pen,.icon-blog,.icon-droplet,.icon-paint-format,.icon-image,.icon-image-2,.icon-images,.icon-camera,.icon-music,.icon-headphones,.icon-play,.icon-film,.icon-camera-2,.icon-dice,.icon-pacman,.icon-spades,.icon-clubs,.icon-diamonds,.icon-pawn,.icon-bullhorn,.icon-connection,.icon-podcast,.icon-feed,.icon-book,.icon-books,.icon-library,.icon-file,.icon-profile,.icon-file-2,.icon-file-3,.icon-file-4,.icon-copy,.icon-copy-2,.icon-copy-3,.icon-paste,.icon-paste-2,.icon-paste-3,.icon-stack,.icon-folder,.icon-folder-open,.icon-tag,.icon-tags,.icon-barcode,.icon-qrcode,.icon-ticket,.icon-cart,.icon-cart-2,.icon-cart-3,.icon-coin,.icon-credit,.icon-calculate,.icon-support,.icon-phone,.icon-phone-hang-up,.icon-address-book,.icon-notebook,.icon-envelop,.icon-pushpin,.icon-location,.icon-location-2,.icon-compass,.icon-map,.icon-map-2,.icon-history,.icon-clock,.icon-clock-2,.icon-alarm,.icon-alarm-2,.icon-bell,.icon-stopwatch,.icon-calendar,.icon-calendar-2,.icon-print,.icon-keyboard,.icon-screen,.icon-laptop,.icon-mobile,.icon-mobile-2,.icon-tablet,.icon-tv,.icon-cabinet,.icon-drawer,.icon-drawer-2,.icon-drawer-3,.icon-box-add,.icon-box-remove,.icon-download,.icon-upload,.icon-disk,.icon-storage,.icon-undo,.icon-redo,.icon-flip,.icon-flip-2,.icon-undo-2,.icon-redo-2,.icon-forward,.icon-reply,.icon-bubble,.icon-bubbles,.icon-bubbles-2,.icon-bubble-2,.icon-bubbles-3,.icon-bubbles-4,.icon-user,.icon-users,.icon-user-2,.icon-users-2,.icon-user-3,.icon-user-4,.icon-quotes-left,.icon-busy,.icon-spinner,.icon-spinner-2,.icon-spinner-3,.icon-spinner-4,.icon-spinner-5,.icon-spinner-6,.icon-binoculars,.icon-search,.icon-zoom-in,.icon-zoom-out,.icon-expand,.icon-contract,.icon-expand-2,.icon-contract-2,.icon-key,.icon-key-2,.icon-lock,.icon-lock-2,.icon-unlocked,.icon-wrench,.icon-settings,.icon-equalizer,.icon-cog,.icon-cogs,.icon-cog-2,.icon-hammer,.icon-wand,.icon-aid,.icon-bug,.icon-pie,.icon-stats,.icon-bars,.icon-bars-2,.icon-gift,.icon-trophy,.icon-glass,.icon-mug,.icon-food,.icon-leaf,.icon-rocket,.icon-meter,.icon-meter2,.icon-dashboard,.icon-hammer-2,.icon-fire,.icon-lab,.icon-magnet,.icon-remove,.icon-remove-2,.icon-briefcase,.icon-airplane,.icon-truck,.icon-road,.icon-accessibility,.icon-target,.icon-shield,.icon-lightning,.icon-switch,.icon-power-cord,.icon-signup,.icon-list,.icon-list-2,.icon-numbered-list,.icon-menu,.icon-menu-2,.icon-tree,.icon-cloud,.icon-cloud-download,.icon-cloud-upload,.icon-download-2,.icon-upload-2,.icon-download-3,.icon-upload-3,.icon-globe,.icon-earth,.icon-link,.icon-flag,.icon-attachment,.icon-eye,.icon-eye-blocked,.icon-eye-2,.icon-bookmark,.icon-bookmarks,.icon-brightness-medium,.icon-brightness-contrast,.icon-contrast,.icon-star,.icon-star-2,.icon-star-3,.icon-heart,.icon-heart-2,.icon-heart-broken,.icon-thumbs-up,.icon-thumbs-up-2,.icon-happy,.icon-happy-2,.icon-smiley,.icon-smiley-2,.icon-tongue,.icon-tongue-2,.icon-sad,.icon-sad-2,.icon-wink,.icon-wink-2,.icon-grin,.icon-grin-2,.icon-cool,.icon-cool-2,.icon-angry,.icon-angry-2,.icon-evil,.icon-evil-2,.icon-shocked,.icon-shocked-2,.icon-confused,.icon-confused-2,.icon-neutral,.icon-neutral-2,.icon-wondering,.icon-wondering-2,.icon-point-up,.icon-point-right,.icon-point-down,.icon-point-left,.icon-warning,.icon-notification,.icon-question,.icon-info,.icon-info-2,.icon-blocked,.icon-cancel-circle,.icon-checkmark-circle,.icon-spam,.icon-close,.icon-checkmark,.icon-checkmark-2,.icon-spell-check,.icon-minus,.icon-plus,.icon-enter,.icon-exit,.icon-play-2,.icon-pause,.icon-stop,.icon-backward,.icon-forward-2,.icon-play-3,.icon-pause-2,.icon-stop-2,.icon-backward-2,.icon-forward-3,.icon-first,.icon-last,.icon-previous,.icon-next,.icon-eject,.icon-volume-high,.icon-volume-medium,.icon-volume-low,.icon-volume-mute,.icon-volume-mute-2,.icon-volume-increase,.icon-volume-decrease,.icon-loop,.icon-loop-2,.icon-loop-3,.icon-shuffle,.icon-arrow-up-left,.icon-arrow-up,.icon-arrow-up-right,.icon-arrow-right,.icon-arrow-down-right,.icon-arrow-down,.icon-arrow-down-left,.icon-arrow-left,.icon-arrow-up-left-2,.icon-arrow-up-2,.icon-arrow-up-right-2,.icon-arrow-right-2,.icon-arrow-down-right-2,.icon-arrow-down-2,.icon-arrow-down-left-2,.icon-arrow-left-2,.icon-arrow-up-left-3,.icon-arrow-up-3,.icon-arrow-up-right-3,.icon-arrow-right-3,.icon-arrow-down-right-3,.icon-arrow-down-3,.icon-arrow-down-left-3,.icon-arrow-left-3,.icon-tab,.icon-checkbox-checked,.icon-checkbox-unchecked,.icon-checkbox-partial,.icon-radio-checked,.icon-radio-unchecked,.icon-crop,.icon-scissors,.icon-filter,.icon-filter-2,.icon-font,.icon-text-height,.icon-text-width,.icon-bold,.icon-underline,.icon-italic,.icon-strikethrough,.icon-omega,.icon-sigma,.icon-table,.icon-table-2,.icon-insert-template,.icon-pilcrow,.icon-left-to-right,.icon-right-to-left,.icon-paragraph-left,.icon-paragraph-center,.icon-paragraph-right,.icon-paragraph-justify,.icon-paragraph-left-2,.icon-paragraph-center-2,.icon-paragraph-right-2,.icon-paragraph-justify-2,.icon-indent-increase,.icon-indent-decrease,.icon-new-tab,.icon-embed,.icon-code,.icon-console,.icon-share,.icon-mail,.icon-mail-2,.icon-mail-3,.icon-mail-4,.icon-google,.icon-google-plus,.icon-google-plus-2,.icon-google-plus-3,.icon-google-plus-4,.icon-google-drive,.icon-facebook,.icon-facebook-2,.icon-facebook-3,.icon-instagram,.icon-twitter,.icon-twitter-2,.icon-twitter-3,.icon-feed-2,.icon-feed-3,.icon-feed-4,.icon-youtube,.icon-youtube-2,.icon-vimeo,.icon-vimeo2,.icon-vimeo-2,.icon-lanyrd,.icon-flickr,.icon-flickr-2,.icon-flickr-3,.icon-flickr-4,.icon-picassa,.icon-picassa-2,.icon-dribbble,.icon-dribbble-2,.icon-dribbble-3,.icon-forrst,.icon-forrst-2,.icon-deviantart,.icon-deviantart-2,.icon-steam,.icon-steam-2,.icon-github,.icon-github-2,.icon-github-3,.icon-github-4,.icon-github-5,.icon-wordpress,.icon-wordpress-2,.icon-joomla,.icon-blogger,.icon-blogger-2,.icon-tumblr,.icon-tumblr-2,.icon-yahoo,.icon-tux,.icon-apple,.icon-finder,.icon-android,.icon-windows,.icon-windows8,.icon-soundcloud,.icon-soundcloud-2,.icon-skype,.icon-reddit,.icon-linkedin,.icon-lastfm,.icon-lastfm-2,.icon-delicious,.icon-stumbleupon,.icon-stumbleupon-2,.icon-stackoverflow,.icon-pinterest,.icon-pinterest-2,.icon-xing,.icon-xing-2,.icon-flattr,.icon-foursquare,.icon-foursquare-2,.icon-paypal,.icon-paypal-2,.icon-paypal-3,.icon-yelp,.icon-libreoffice,.icon-file-pdf,.icon-file-openoffice,.icon-file-word,.icon-file-excel,.icon-file-zip,.icon-file-powerpoint,.icon-file-xml,.icon-file-css,.icon-html5,.icon-html5-2,.icon-css3,.icon-chrome,.icon-firefox,.icon-IE,.icon-opera,.icon-safari,.icon-IcoMoon{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;}
.icon-home:before{content:"\e000";}
.icon-home-2:before{content:"\e001";}
.icon-home-3:before{content:"\e002";}
.icon-office:before{content:"\e003";}
.icon-newspaper:before{content:"\e004";}
.icon-pencil:before{content:"\e005";}
.icon-pencil-2:before{content:"\e006";}
.icon-quill:before{content:"\e007";}
.icon-pen:before{content:"\e008";}
.icon-blog:before{content:"\e009";}
.icon-droplet:before{content:"\e00a";}
.icon-paint-format:before{content:"\e00b";}
.icon-image:before{content:"\e00c";}
.icon-image-2:before{content:"\e00d";}
.icon-images:before{content:"\e00e";}
.icon-camera:before{content:"\e00f";}
.icon-music:before{content:"\e010";}
.icon-headphones:before{content:"\e011";}
.icon-play:before{content:"\e012";}
.icon-film:before{content:"\e013";}
.icon-camera-2:before{content:"\e014";}
.icon-dice:before{content:"\e015";}
.icon-pacman:before{content:"\e016";}
.icon-spades:before{content:"\e017";}
.icon-clubs:before{content:"\e018";}
.icon-diamonds:before{content:"\e019";}
.icon-pawn:before{content:"\e01a";}
.icon-bullhorn:before{content:"\e01b";}
.icon-connection:before{content:"\e01c";}
.icon-podcast:before{content:"\e01d";}
.icon-feed:before{content:"\e01e";}
.icon-book:before{content:"\e01f";}
.icon-books:before{content:"\e020";}
.icon-library:before{content:"\e021";}
.icon-file:before{content:"\e022";}
.icon-profile:before{content:"\e023";}
.icon-file-2:before{content:"\e024";}
.icon-file-3:before{content:"\e025";}
.icon-file-4:before{content:"\e026";}
.icon-copy:before{content:"\e027";}
.icon-copy-2:before{content:"\e028";}
.icon-copy-3:before{content:"\e029";}
.icon-paste:before{content:"\e02a";}
.icon-paste-2:before{content:"\e02b";}
.icon-paste-3:before{content:"\e02c";}
.icon-stack:before{content:"\e02d";}
.icon-folder:before{content:"\e02e";}
.icon-folder-open:before{content:"\e02f";}
.icon-tag:before{content:"\e030";}
.icon-tags:before{content:"\e031";}
.icon-barcode:before{content:"\e032";}
.icon-qrcode:before{content:"\e033";}
.icon-ticket:before{content:"\e034";}
.icon-cart:before{content:"\e035";}
.icon-cart-2:before{content:"\e036";}
.icon-cart-3:before{content:"\e037";}
.icon-coin:before{content:"\e038";}
.icon-credit:before{content:"\e039";}
.icon-calculate:before{content:"\e03a";}
.icon-support:before{content:"\e03b";}
.icon-phone:before{content:"\e03c";}
.icon-phone-hang-up:before{content:"\e03d";}
.icon-address-book:before{content:"\e03e";}
.icon-notebook:before{content:"\e03f";}
.icon-envelop:before{content:"\e040";}
.icon-pushpin:before{content:"\e041";}
.icon-location:before{content:"\e042";}
.icon-location-2:before{content:"\e043";}
.icon-compass:before{content:"\e044";}
.icon-map:before{content:"\e045";}
.icon-map-2:before{content:"\e046";}
.icon-history:before{content:"\e047";}
.icon-clock:before{content:"\e048";}
.icon-clock-2:before{content:"\e049";}
.icon-alarm:before{content:"\e04a";}
.icon-alarm-2:before{content:"\e04b";}
.icon-bell:before{content:"\e04c";}
.icon-stopwatch:before{content:"\e04d";}
.icon-calendar:before{content:"\e04e";}
.icon-calendar-2:before{content:"\e04f";}
.icon-print:before{content:"\e050";}
.icon-keyboard:before{content:"\e051";}
.icon-screen:before{content:"\e052";}
.icon-laptop:before{content:"\e053";}
.icon-mobile:before{content:"\e054";}
.icon-mobile-2:before{content:"\e055";}
.icon-tablet:before{content:"\e056";}
.icon-tv:before{content:"\e057";}
.icon-cabinet:before{content:"\e058";}
.icon-drawer:before{content:"\e059";}
.icon-drawer-2:before{content:"\e05a";}
.icon-drawer-3:before{content:"\e05b";}
.icon-box-add:before{content:"\e05c";}
.icon-box-remove:before{content:"\e05d";}
.icon-download:before{content:"\e05e";}
.icon-upload:before{content:"\e05f";}
.icon-disk:before{content:"\e060";}
.icon-storage:before{content:"\e061";}
.icon-undo:before{content:"\e062";}
.icon-redo:before{content:"\e063";}
.icon-flip:before{content:"\e064";}
.icon-flip-2:before{content:"\e065";}
.icon-undo-2:before{content:"\e066";}
.icon-redo-2:before{content:"\e067";}
.icon-forward:before{content:"\e068";}
.icon-reply:before{content:"\e069";}
.icon-bubble:before{content:"\e06a";}
.icon-bubbles:before{content:"\e06b";}
.icon-bubbles-2:before{content:"\e06c";}
.icon-bubble-2:before{content:"\e06d";}
.icon-bubbles-3:before{content:"\e06e";}
.icon-bubbles-4:before{content:"\e06f";}
.icon-user:before{content:"\e070";}
.icon-users:before{content:"\e071";}
.icon-user-2:before{content:"\e072";}
.icon-users-2:before{content:"\e073";}
.icon-user-3:before{content:"\e074";}
.icon-user-4:before{content:"\e075";}
.icon-quotes-left:before{content:"\e076";}
.icon-busy:before{content:"\e077";}
.icon-spinner:before{content:"\e078";}
.icon-spinner-2:before{content:"\e079";}
.icon-spinner-3:before{content:"\e07a";}
.icon-spinner-4:before{content:"\e07b";}
.icon-spinner-5:before{content:"\e07c";}
.icon-spinner-6:before{content:"\e07d";}
.icon-binoculars:before{content:"\e07e";}
.icon-search:before{content:"\e07f";}
.icon-zoom-in:before{content:"\e080";}
.icon-zoom-out:before{content:"\e081";}
.icon-expand:before{content:"\e082";}
.icon-contract:before{content:"\e083";}
.icon-expand-2:before{content:"\e084";}
.icon-contract-2:before{content:"\e085";}
.icon-key:before{content:"\e086";}
.icon-key-2:before{content:"\e087";}
.icon-lock:before{content:"\e088";}
.icon-lock-2:before{content:"\e089";}
.icon-unlocked:before{content:"\e08a";}
.icon-wrench:before{content:"\e08b";}
.icon-settings:before{content:"\e08c";}
.icon-equalizer:before{content:"\e08d";}
.icon-cog:before{content:"\e08e";}
.icon-cogs:before{content:"\e08f";}
.icon-cog-2:before{content:"\e090";}
.icon-hammer:before{content:"\e091";}
.icon-wand:before{content:"\e092";}
.icon-aid:before{content:"\e093";}
.icon-bug:before{content:"\e094";}
.icon-pie:before{content:"\e095";}
.icon-stats:before{content:"\e096";}
.icon-bars:before{content:"\e097";}
.icon-bars-2:before{content:"\e098";}
.icon-gift:before{content:"\e099";}
.icon-trophy:before{content:"\e09a";}
.icon-glass:before{content:"\e09b";}
.icon-mug:before{content:"\e09c";}
.icon-food:before{content:"\e09d";}
.icon-leaf:before{content:"\e09e";}
.icon-rocket:before{content:"\e09f";}
.icon-meter:before{content:"\e0a0";}
.icon-meter2:before{content:"\e0a1";}
.icon-dashboard:before{content:"\e0a2";}
.icon-hammer-2:before{content:"\e0a3";}
.icon-fire:before{content:"\e0a4";}
.icon-lab:before{content:"\e0a5";}
.icon-magnet:before{content:"\e0a6";}
.icon-remove:before{content:"\e0a7";}
.icon-remove-2:before{content:"\e0a8";}
.icon-briefcase:before{content:"\e0a9";}
.icon-airplane:before{content:"\e0aa";}
.icon-truck:before{content:"\e0ab";}
.icon-road:before{content:"\e0ac";}
.icon-accessibility:before{content:"\e0ad";}
.icon-target:before{content:"\e0ae";}
.icon-shield:before{content:"\e0af";}
.icon-lightning:before{content:"\e0b0";}
.icon-switch:before{content:"\e0b1";}
.icon-power-cord:before{content:"\e0b2";}
.icon-signup:before{content:"\e0b3";}
.icon-list:before{content:"\e0b4";}
.icon-list-2:before{content:"\e0b5";}
.icon-numbered-list:before{content:"\e0b6";}
.icon-menu:before{content:"\e0b7";}
.icon-menu-2:before{content:"\e0b8";}
.icon-tree:before{content:"\e0b9";}
.icon-cloud:before{content:"\e0ba";}
.icon-cloud-download:before{content:"\e0bb";}
.icon-cloud-upload:before{content:"\e0bc";}
.icon-download-2:before{content:"\e0bd";}
.icon-upload-2:before{content:"\e0be";}
.icon-download-3:before{content:"\e0bf";}
.icon-upload-3:before{content:"\e0c0";}
.icon-globe:before{content:"\e0c1";}
.icon-earth:before{content:"\e0c2";}
.icon-link:before{content:"\e0c3";}
.icon-flag:before{content:"\e0c4";}
.icon-attachment:before{content:"\e0c5";}
.icon-eye:before{content:"\e0c6";}
.icon-eye-blocked:before{content:"\e0c7";}
.icon-eye-2:before{content:"\e0c8";}
.icon-bookmark:before{content:"\e0c9";}
.icon-bookmarks:before{content:"\e0ca";}
.icon-brightness-medium:before{content:"\e0cb";}
.icon-brightness-contrast:before{content:"\e0cc";}
.icon-contrast:before{content:"\e0cd";}
.icon-star:before{content:"\e0ce";}
.icon-star-2:before{content:"\e0cf";}
.icon-star-3:before{content:"\e0d0";}
.icon-heart:before{content:"\e0d1";}
.icon-heart-2:before{content:"\e0d2";}
.icon-heart-broken:before{content:"\e0d3";}
.icon-thumbs-up:before{content:"\e0d4";}
.icon-thumbs-up-2:before{content:"\e0d5";}
.icon-happy:before{content:"\e0d6";}
.icon-happy-2:before{content:"\e0d7";}
.icon-smiley:before{content:"\e0d8";}
.icon-smiley-2:before{content:"\e0d9";}
.icon-tongue:before{content:"\e0da";}
.icon-tongue-2:before{content:"\e0db";}
.icon-sad:before{content:"\e0dc";}
.icon-sad-2:before{content:"\e0dd";}
.icon-wink:before{content:"\e0de";}
.icon-wink-2:before{content:"\e0df";}
.icon-grin:before{content:"\e0e0";}
.icon-grin-2:before{content:"\e0e1";}
.icon-cool:before{content:"\e0e2";}
.icon-cool-2:before{content:"\e0e3";}
.icon-angry:before{content:"\e0e4";}
.icon-angry-2:before{content:"\e0e5";}
.icon-evil:before{content:"\e0e6";}
.icon-evil-2:before{content:"\e0e7";}
.icon-shocked:before{content:"\e0e8";}
.icon-shocked-2:before{content:"\e0e9";}
.icon-confused:before{content:"\e0ea";}
.icon-confused-2:before{content:"\e0eb";}
.icon-neutral:before{content:"\e0ec";}
.icon-neutral-2:before{content:"\e0ed";}
.icon-wondering:before{content:"\e0ee";}
.icon-wondering-2:before{content:"\e0ef";}
.icon-point-up:before{content:"\e0f0";}
.icon-point-right:before{content:"\e0f1";}
.icon-point-down:before{content:"\e0f2";}
.icon-point-left:before{content:"\e0f3";}
.icon-warning:before{content:"\e0f4";}
.icon-notification:before{content:"\e0f5";}
.icon-question:before{content:"\e0f6";}
.icon-info:before{content:"\e0f7";}
.icon-info-2:before{content:"\e0f8";}
.icon-blocked:before{content:"\e0f9";}
.icon-cancel-circle:before{content:"\e0fa";}
.icon-checkmark-circle:before{content:"\e0fb";}
.icon-spam:before{content:"\e0fc";}
.icon-close:before{content:"\e0fd";}
.icon-checkmark:before{content:"\e0fe";}
.icon-checkmark-2:before{content:"\e0ff";}
.icon-spell-check:before{content:"\e100";}
.icon-minus:before{content:"\e101";}
.icon-plus:before{content:"\e102";}
.icon-enter:before{content:"\e103";}
.icon-exit:before{content:"\e104";}
.icon-play-2:before{content:"\e105";}
.icon-pause:before{content:"\e106";}
.icon-stop:before{content:"\e107";}
.icon-backward:before{content:"\e108";}
.icon-forward-2:before{content:"\e109";}
.icon-play-3:before{content:"\e10a";}
.icon-pause-2:before{content:"\e10b";}
.icon-stop-2:before{content:"\e10c";}
.icon-backward-2:before{content:"\e10d";}
.icon-forward-3:before{content:"\e10e";}
.icon-first:before{content:"\e10f";}
.icon-last:before{content:"\e110";}
.icon-previous:before{content:"\e111";}
.icon-next:before{content:"\e112";}
.icon-eject:before{content:"\e113";}
.icon-volume-high:before{content:"\e114";}
.icon-volume-medium:before{content:"\e115";}
.icon-volume-low:before{content:"\e116";}
.icon-volume-mute:before{content:"\e117";}
.icon-volume-mute-2:before{content:"\e118";}
.icon-volume-increase:before{content:"\e119";}
.icon-volume-decrease:before{content:"\e11a";}
.icon-loop:before{content:"\e11b";}
.icon-loop-2:before{content:"\e11c";}
.icon-loop-3:before{content:"\e11d";}
.icon-shuffle:before{content:"\e11e";}
.icon-arrow-up-left:before{content:"\e11f";}
.icon-arrow-up:before{content:"\e120";}
.icon-arrow-up-right:before{content:"\e121";}
.icon-arrow-right:before{content:"\e122";}
.icon-arrow-down-right:before{content:"\e123";}
.icon-arrow-down:before{content:"\e124";}
.icon-arrow-down-left:before{content:"\e125";}
.icon-arrow-left:before{content:"\e126";}
.icon-arrow-up-left-2:before{content:"\e127";}
.icon-arrow-up-2:before{content:"\e128";}
.icon-arrow-up-right-2:before{content:"\e129";}
.icon-arrow-right-2:before{content:"\e12a";}
.icon-arrow-down-right-2:before{content:"\e12b";}
.icon-arrow-down-2:before{content:"\e12c";}
.icon-arrow-down-left-2:before{content:"\e12d";}
.icon-arrow-left-2:before{content:"\e12e";}
.icon-arrow-up-left-3:before{content:"\e12f";}
.icon-arrow-up-3:before{content:"\e130";}
.icon-arrow-up-right-3:before{content:"\e131";}
.icon-arrow-right-3:before{content:"\e132";}
.icon-arrow-down-right-3:before{content:"\e133";}
.icon-arrow-down-3:before{content:"\e134";}
.icon-arrow-down-left-3:before{content:"\e135";}
.icon-arrow-left-3:before{content:"\e136";}
.icon-tab:before{content:"\e137";}
.icon-checkbox-checked:before{content:"\e138";}
.icon-checkbox-unchecked:before{content:"\e139";}
.icon-checkbox-partial:before{content:"\e13a";}
.icon-radio-checked:before{content:"\e13b";}
.icon-radio-unchecked:before{content:"\e13c";}
.icon-crop:before{content:"\e13d";}
.icon-scissors:before{content:"\e13e";}
.icon-filter:before{content:"\e13f";}
.icon-filter-2:before{content:"\e140";}
.icon-font:before{content:"\e141";}
.icon-text-height:before{content:"\e142";}
.icon-text-width:before{content:"\e143";}
.icon-bold:before{content:"\e144";}
.icon-underline:before{content:"\e145";}
.icon-italic:before{content:"\e146";}
.icon-strikethrough:before{content:"\e147";}
.icon-omega:before{content:"\e148";}
.icon-sigma:before{content:"\e149";}
.icon-table:before{content:"\e14a";}
.icon-table-2:before{content:"\e14b";}
.icon-insert-template:before{content:"\e14c";}
.icon-pilcrow:before{content:"\e14d";}
.icon-left-to-right:before{content:"\e14e";}
.icon-right-to-left:before{content:"\e14f";}
.icon-paragraph-left:before{content:"\e150";}
.icon-paragraph-center:before{content:"\e151";}
.icon-paragraph-right:before{content:"\e152";}
.icon-paragraph-justify:before{content:"\e153";}
.icon-paragraph-left-2:before{content:"\e154";}
.icon-paragraph-center-2:before{content:"\e155";}
.icon-paragraph-right-2:before{content:"\e156";}
.icon-paragraph-justify-2:before{content:"\e157";}
.icon-indent-increase:before{content:"\e158";}
.icon-indent-decrease:before{content:"\e159";}
.icon-new-tab:before{content:"\e15a";}
.icon-embed:before{content:"\e15b";}
.icon-code:before{content:"\e15c";}
.icon-console:before{content:"\e15d";}
.icon-share:before{content:"\e15e";}
.icon-mail:before{content:"\e15f";}
.icon-mail-2:before{content:"\e160";}
.icon-mail-3:before{content:"\e161";}
.icon-mail-4:before{content:"\e162";}
.icon-google:before{content:"\e163";}
.icon-google-plus:before{content:"\e164";}
.icon-google-plus-2:before{content:"\e165";}
.icon-google-plus-3:before{content:"\e166";}
.icon-google-plus-4:before{content:"\e167";}
.icon-google-drive:before{content:"\e168";}
.icon-facebook:before{content:"\e169";}
.icon-facebook-2:before{content:"\e16a";}
.icon-facebook-3:before{content:"\e16b";}
.icon-instagram:before{content:"\e16c";}
.icon-twitter:before{content:"\e16d";}
.icon-twitter-2:before{content:"\e16e";}
.icon-twitter-3:before{content:"\e16f";}
.icon-feed-2:before{content:"\e170";}
.icon-feed-3:before{content:"\e171";}
.icon-feed-4:before{content:"\e172";}
.icon-youtube:before{content:"\e173";}
.icon-youtube-2:before{content:"\e174";}
.icon-vimeo:before{content:"\e175";}
.icon-vimeo2:before{content:"\e176";}
.icon-vimeo-2:before{content:"\e177";}
.icon-lanyrd:before{content:"\e178";}
.icon-flickr:before{content:"\e179";}
.icon-flickr-2:before{content:"\e17a";}
.icon-flickr-3:before{content:"\e17b";}
.icon-flickr-4:before{content:"\e17c";}
.icon-picassa:before{content:"\e17d";}
.icon-picassa-2:before{content:"\e17e";}
.icon-dribbble:before{content:"\e17f";}
.icon-dribbble-2:before{content:"\e180";}
.icon-dribbble-3:before{content:"\e181";}
.icon-forrst:before{content:"\e182";}
.icon-forrst-2:before{content:"\e183";}
.icon-deviantart:before{content:"\e184";}
.icon-deviantart-2:before{content:"\e185";}
.icon-steam:before{content:"\e186";}
.icon-steam-2:before{content:"\e187";}
.icon-github:before{content:"\e188";}
.icon-github-2:before{content:"\e189";}
.icon-github-3:before{content:"\e18a";}
.icon-github-4:before{content:"\e18b";}
.icon-github-5:before{content:"\e18c";}
.icon-wordpress:before{content:"\e18d";}
.icon-wordpress-2:before{content:"\e18e";}
.icon-joomla:before{content:"\e18f";}
.icon-blogger:before{content:"\e190";}
.icon-blogger-2:before{content:"\e191";}
.icon-tumblr:before{content:"\e192";}
.icon-tumblr-2:before{content:"\e193";}
.icon-yahoo:before{content:"\e194";}
.icon-tux:before{content:"\e195";}
.icon-apple:before{content:"\e196";}
.icon-finder:before{content:"\e197";}
.icon-android:before{content:"\e198";}
.icon-windows:before{content:"\e199";}
.icon-windows8:before{content:"\e19a";}
.icon-soundcloud:before{content:"\e19b";}
.icon-soundcloud-2:before{content:"\e19c";}
.icon-skype:before{content:"\e19d";}
.icon-reddit:before{content:"\e19e";}
.icon-linkedin:before{content:"\e19f";}
.icon-lastfm:before{content:"\e1a0";}
.icon-lastfm-2:before{content:"\e1a1";}
.icon-delicious:before{content:"\e1a2";}
.icon-stumbleupon:before{content:"\e1a3";}
.icon-stumbleupon-2:before{content:"\e1a4";}
.icon-stackoverflow:before{content:"\e1a5";}
.icon-pinterest:before{content:"\e1a6";}
.icon-pinterest-2:before{content:"\e1a7";}
.icon-xing:before{content:"\e1a8";}
.icon-xing-2:before{content:"\e1a9";}
.icon-flattr:before{content:"\e1aa";}
.icon-foursquare:before{content:"\e1ab";}
.icon-foursquare-2:before{content:"\e1ac";}
.icon-paypal:before{content:"\e1ad";}
.icon-paypal-2:before{content:"\e1ae";}
.icon-paypal-3:before{content:"\e1af";}
.icon-yelp:before{content:"\e1b0";}
.icon-libreoffice:before{content:"\e1b1";}
.icon-file-pdf:before{content:"\e1b2";}
.icon-file-openoffice:before{content:"\e1b3";}
.icon-file-word:before{content:"\e1b4";}
.icon-file-excel:before{content:"\e1b5";}
.icon-file-zip:before{content:"\e1b6";}
.icon-file-powerpoint:before{content:"\e1b7";}
.icon-file-xml:before{content:"\e1b8";}
.icon-file-css:before{content:"\e1b9";}
.icon-html5:before{content:"\e1ba";}
.icon-html5-2:before{content:"\e1bb";}
.icon-css3:before{content:"\e1bc";}
.icon-chrome:before{content:"\e1bd";}
.icon-firefox:before{content:"\e1be";}
.icon-IE:before{content:"\e1bf";}
.icon-opera:before{content:"\e1c0";}
.icon-safari:before{content:"\e1c1";}
.icon-IcoMoon:before{content:"\e1c2";}

附件:下载该文件资源,减少时间成本(增值服务)