OwlCyberSecurity - MANAGER

Edit File: aux-pagebuilder-icons.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>aux-pagebuilder-icons</title>
		<style>
		body {
			margin:0;
			padding:10px 20px;
			background:#fff;
			color:#222;
			}
		h1, div, footer {
			font-family:"Helvetica Neue", Arial, sans-serif;
			}
		h1 {
			margin:0 0 20px;
			font-size:32px;
			font-weight:normal;
			}
		h1 small {
			font-size: 0.8em;
			padding-left: 2em;
		}
		.icons {
			margin-bottom:40px;
			-webkit-column-count:5;
			   -moz-column-count:5;
			        column-count:5;
			-webkit-column-gap:20px;
			   -moz-column-gap:20px;
			        column-gap:20px;
			}
		.icons__item,
		.icons__item i {
			line-height:2em;
			cursor:pointer;
			overflow:hidden;
			}
		.icons__item:hover {
			color:#3c90be;
			}
		.icons__item i {
			display:inline-block;
			width:32px;
			text-align:center;
			}
		.icons__item:hover i {
			-webkit-transform:scale(1.5);
			        transform:scale(1.5);
			}
		footer {
			margin-top:40px;
			font-size:14px;
			color:#999;
			}

/* Generated by grunt-webfont */

@font-face {
	font-family:"aux-pagebuilder-icons";
	src:url("aux-pagebuilder-icons.eot?747735af9bed6ed956156b06a9c04849");
	src:url("aux-pagebuilder-icons.eot?#iefix") format("embedded-opentype"),
		url("aux-pagebuilder-icons.woff?747735af9bed6ed956156b06a9c04849") format("woff"),
		url("aux-pagebuilder-icons.ttf?747735af9bed6ed956156b06a9c04849") format("truetype");
	font-weight:normal;
	font-style:normal;
}

.aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] {
	
		font-family:"aux-pagebuilder-icons";
	
	display:inline-block;
	vertical-align:middle;
	line-height:1;
	font-weight:normal;
	font-style:normal;
	speak:none;
	text-decoration:inherit;
	text-transform:none;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Icons */

.aux-pb-icons-accordion:before {
	content:"\f101";
}

.aux-pb-icons-blog:before {
	content:"\f102";
}

.aux-pb-icons-button:before {
	content:"\f103";
}

.aux-pb-icons-calendar:before {
	content:"\f104";
}

.aux-pb-icons-callout:before {
	content:"\f105";
}

.aux-pb-icons-caption:before {
	content:"\f106";
}

.aux-pb-icons-carousel:before {
	content:"\f107";
}

.aux-pb-icons-chart:before {
	content:"\f108";
}

.aux-pb-icons-code:before {
	content:"\f109";
}

.aux-pb-icons-column:before {
	content:"\f10a";
}

.aux-pb-icons-contact-box:before {
	content:"\f10b";
}

.aux-pb-icons-contact-form:before {
	content:"\f10c";
}

.aux-pb-icons-divider:before {
	content:"\f10d";
}

.aux-pb-icons-dropcap:before {
	content:"\f10e";
}

.aux-pb-icons-facebook:before {
	content:"\f10f";
}

.aux-pb-icons-faq:before {
	content:"\f110";
}

.aux-pb-icons-flickr:before {
	content:"\f111";
}

.aux-pb-icons-gallery:before {
	content:"\f112";
}

.aux-pb-icons-google-maps:before {
	content:"\f113";
}

.aux-pb-icons-grid:before {
	content:"\f114";
}

.aux-pb-icons-image:before {
	content:"\f115";
}

.aux-pb-icons-land:before {
	content:"\f116";
}

.aux-pb-icons-link:before {
	content:"\f117";
}

.aux-pb-icons-list:before {
	content:"\f118";
}

.aux-pb-icons-masonry:before {
	content:"\f119";
}

.aux-pb-icons-message-box:before {
	content:"\f11a";
}

.aux-pb-icons-news:before {
	content:"\f11b";
}

.aux-pb-icons-partners:before {
	content:"\f11c";
}

.aux-pb-icons-pf-grid:before {
	content:"\f11d";
}

.aux-pb-icons-portfolio:before {
	content:"\f11e";
}

.aux-pb-icons-post-slider:before {
	content:"\f11f";
}

.aux-pb-icons-price-table:before {
	content:"\f120";
}

.aux-pb-icons-quote:before {
	content:"\f121";
}

.aux-pb-icons-search:before {
	content:"\f122";
}

.aux-pb-icons-services:before {
	content:"\f123";
}

.aux-pb-icons-socials:before {
	content:"\f124";
}

.aux-pb-icons-sound-cloud:before {
	content:"\f125";
}

.aux-pb-icons-staff:before {
	content:"\f126";
}

.aux-pb-icons-tab:before {
	content:"\f127";
}

.aux-pb-icons-testimonial:before {
	content:"\f128";
}

.aux-pb-icons-text:before {
	content:"\f129";
}

.aux-pb-icons-tile-recent-news:before {
	content:"\f12a";
}

.aux-pb-icons-tile:before {
	content:"\f12b";
}

.aux-pb-icons-timeline:before {
	content:"\f12c";
}

.aux-pb-icons-video:before {
	content:"\f12d";
}

</style>
	</head>
	<body>
		<h1>aux-pagebuilder-icons</h1>

<div class="icons" id="icons">
			
				<div class="icons__item" data-name="accordion"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-accordion"></i> aux-pb-icons-accordion</div>
			
				<div class="icons__item" data-name="blog"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-blog"></i> aux-pb-icons-blog</div>
			
				<div class="icons__item" data-name="button"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-button"></i> aux-pb-icons-button</div>
			
				<div class="icons__item" data-name="calendar"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-calendar"></i> aux-pb-icons-calendar</div>
			
				<div class="icons__item" data-name="callout"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-callout"></i> aux-pb-icons-callout</div>
			
				<div class="icons__item" data-name="caption"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-caption"></i> aux-pb-icons-caption</div>
			
				<div class="icons__item" data-name="carousel"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-carousel"></i> aux-pb-icons-carousel</div>
			
				<div class="icons__item" data-name="chart"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-chart"></i> aux-pb-icons-chart</div>
			
				<div class="icons__item" data-name="code"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-code"></i> aux-pb-icons-code</div>
			
				<div class="icons__item" data-name="column"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-column"></i> aux-pb-icons-column</div>
			
				<div class="icons__item" data-name="contact-box"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-contact-box"></i> aux-pb-icons-contact-box</div>
			
				<div class="icons__item" data-name="contact-form"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-contact-form"></i> aux-pb-icons-contact-form</div>
			
				<div class="icons__item" data-name="divider"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-divider"></i> aux-pb-icons-divider</div>
			
				<div class="icons__item" data-name="dropcap"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-dropcap"></i> aux-pb-icons-dropcap</div>
			
				<div class="icons__item" data-name="facebook"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-facebook"></i> aux-pb-icons-facebook</div>
			
				<div class="icons__item" data-name="faq"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-faq"></i> aux-pb-icons-faq</div>
			
				<div class="icons__item" data-name="flickr"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-flickr"></i> aux-pb-icons-flickr</div>
			
				<div class="icons__item" data-name="gallery"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-gallery"></i> aux-pb-icons-gallery</div>
			
				<div class="icons__item" data-name="google-maps"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-google-maps"></i> aux-pb-icons-google-maps</div>
			
				<div class="icons__item" data-name="grid"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-grid"></i> aux-pb-icons-grid</div>
			
				<div class="icons__item" data-name="image"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-image"></i> aux-pb-icons-image</div>
			
				<div class="icons__item" data-name="land"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-land"></i> aux-pb-icons-land</div>
			
				<div class="icons__item" data-name="link"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-link"></i> aux-pb-icons-link</div>
			
				<div class="icons__item" data-name="list"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-list"></i> aux-pb-icons-list</div>
			
				<div class="icons__item" data-name="masonry"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-masonry"></i> aux-pb-icons-masonry</div>
			
				<div class="icons__item" data-name="message-box"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-message-box"></i> aux-pb-icons-message-box</div>
			
				<div class="icons__item" data-name="news"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-news"></i> aux-pb-icons-news</div>
			
				<div class="icons__item" data-name="partners"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-partners"></i> aux-pb-icons-partners</div>
			
				<div class="icons__item" data-name="pf-grid"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-pf-grid"></i> aux-pb-icons-pf-grid</div>
			
				<div class="icons__item" data-name="portfolio"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-portfolio"></i> aux-pb-icons-portfolio</div>
			
				<div class="icons__item" data-name="post-slider"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-post-slider"></i> aux-pb-icons-post-slider</div>
			
				<div class="icons__item" data-name="price-table"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-price-table"></i> aux-pb-icons-price-table</div>
			
				<div class="icons__item" data-name="quote"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-quote"></i> aux-pb-icons-quote</div>
			
				<div class="icons__item" data-name="search"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-search"></i> aux-pb-icons-search</div>
			
				<div class="icons__item" data-name="services"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-services"></i> aux-pb-icons-services</div>
			
				<div class="icons__item" data-name="socials"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-socials"></i> aux-pb-icons-socials</div>
			
				<div class="icons__item" data-name="sound-cloud"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-sound-cloud"></i> aux-pb-icons-sound-cloud</div>
			
				<div class="icons__item" data-name="staff"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-staff"></i> aux-pb-icons-staff</div>
			
				<div class="icons__item" data-name="tab"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-tab"></i> aux-pb-icons-tab</div>
			
				<div class="icons__item" data-name="testimonial"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-testimonial"></i> aux-pb-icons-testimonial</div>
			
				<div class="icons__item" data-name="text"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-text"></i> aux-pb-icons-text</div>
			
				<div class="icons__item" data-name="tile-recent-news"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-tile-recent-news"></i> aux-pb-icons-tile-recent-news</div>
			
				<div class="icons__item" data-name="tile"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-tile"></i> aux-pb-icons-tile</div>
			
				<div class="icons__item" data-name="timeline"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-timeline"></i> aux-pb-icons-timeline</div>
			
				<div class="icons__item" data-name="video"><i class="aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-video"></i> aux-pb-icons-video</div>
			
		</div>

<h1>Usage</h1>
		<pre><code>&lt;i class=&quot;aux-pb-icons, [class^="aux-pb-icons-"], [class*=" aux-pb-icons-"] aux-pb-icons-<span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>

<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>