DC
/
arm-api


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
							<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documentation Icon Font - Stroke Icons 7 - by Pixeden.</title>

	<!-- Docs CSS -->
	<link href="assets/libs/css/bootstrap.min.css" rel="stylesheet" />
	<link href="assets/libs/css/bootstrap-select.css" rel="stylesheet" />
	<link href="assets/libs/css/prism.css" rel="stylesheet" />
	<link href="assets/docs/style.css" rel="stylesheet" />

	<!-- Icon font CSS -->
	<link href="pe-icon-7-stroke/css/pe-icon-7-stroke.css" rel="stylesheet" />
	<link href="pe-icon-7-stroke/css/helper.css" rel="stylesheet" />

</head>
<body>

	<header id="top-bar">
		<div class="container">
			<img src="assets/images/logo.png" alt="logo"/>
		</div>
	</header> <!-- /top-bar -->

	<section id="hero_box">
		<div class="container">
			<h1>Documentation</h1>
      <p>You will find in this document details on how to use our icon font and a list of useful helper classes.</p>
			</div>
		</section> <!-- /hero_box -->

<section id="docs_box">
	<div class="container">
		<section id="default-css">
			<h2 class="page-header">Add our icon font <small>to your website</small></h2>
			<ol>
				<li>Copy the entire <code>pe-icon-7-stroke</code> directory into your project.</li>
				<li>
					In the <code>&lt;head&gt;</code> of your html, reference the location to our icon font CSS: <span class="italic">pe-icon-7-stroke.css</span> and if needed helper CSS: <span class="italic">helper.css</span>.
<pre class="language-markup"><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;path/to/pe-icon-7-stroke/css/pe-icon-7-stroke.css&quot;&gt;

&lt;!-- Optional - Adds useful class to manipulate icon font display --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;path/to/pe-icon-7-stroke/css/helper.css&quot;&gt;</code></pre>
				</li>
			</ol>
		</section>
		<section id="inline">
			<h2 class="page-header">Place the icons <small>in your HTML</small></h2>
			<div class="row">
				<div class="col-md-3 col-sm-4">
					<p>
						<span class="pe-7s-map-marker"></span> pe-7s-map-marker <br/>
						<i class="pe-7s-home"></i> pe-7s-home
					</p>
				</div>
				<div class="col-md-9 col-sm-8">
					<p>Easiest way is to place your icon inline using a html tag such as <code>&lt;span&gt;</code> or <code>&lt;i&gt;</code></p>
<pre class="language-markup">
<code>&lt;span class=&quot;pe-7s-map-marker&quot;&gt;&lt;/span&gt; pe-7s-map-marker
&lt;i class=&quot;pe-7s-home&quot;&gt;&lt;/i&gt; pe-7s-home</code></pre>
					<div class="alert alert-success"><i class="pe-lg pe-7s-info"></i> icon unicode is added with CSS and the pseudo-class :before.</div>
				</div>
			</div>
		</section>

		<section id="icomoon">
		<h2 class="page-header">Compatible with Icomoon <small>font creator tool</small></h2>
    <p>The IcoMoon app lets you build and use your own icon sets: <a target="_blank" href="http://icomoon.io/app/">IcoMoon App</a>.<br>
		You can import <code>icomoon/*selection.json*</code> in the IcoMoon app using the *Import Icons* button (or via Main Menu > Manage Projects) to retrieve this specific icon font.<br>
    This way you can mix and match our icon font with other fonts or select only the icons you need and generate a new font.
    </p>
		</section>

		<section id="helper">
		<h2 class="page-header">Helper classes <small>based on font-awesome useful classes <span class="italic">(optional)</span></small></h2>
		<p> Below you will find a list of useful classes to modify the icon display, layout, sizes etc... They come with the helper.css file and are based on a modified version of font-awesome classes.
		<strong>Important:</strong> <span class="italic"> if you already use font-awesome (FA) icon font in your website, you might want to delete the classes in the helper file under <code>/* FA based classes */</code> and use the FA classes instead.</span></p>
		</section>

		<section id="larger">
		  <h3 class="page-header">Larger Icons &amp; Vertical Align </h2>
		  <div class="row">
		    <div class="col-md-3 col-sm-4">
		      <p><i class="pe-7s-map-marker pe-lg pe-va"></i> pe-7s-map-marker</p>
		      <p><i class="pe-7s-map-marker pe-2x pe-va"></i> pe-7s-map-marker</p>
		      <p><i class="pe-7s-map-marker pe-3x pe-va"></i> pe-7s-map-marker</p>
		      <p><i class="pe-7s-map-marker pe-4x pe-va"></i> pe-7s-map-marker</p>
		      <p><i class="pe-7s-map-marker pe-5x pe-va"></i> pe-7s-map-marker</p>
		    </div>
		    <div class="col-md-9 col-sm-8">
		      <p>
		        To increase icon sizes relative to their container, use the <code>pe-lg</code> (33% increase), <code>pe-2x</code>,
		        <code>pe-3x</code>, <code>pe-4x</code>, or <code>pe-5x</code> classes.<br/>
		        To align the icon at the middle of a text, use the <code>pe-va</code> class.
		      </p>
<pre class="language-markup"><code>&lt;p&gt;&lt;i class=&quot;pe-7s-map-marker pe-lg pe-va&quot;&gt;&lt;/i&gt; pe-7s-map-marker&lt;/p&gt;
&lt;p&gt;&lt;i class=&quot;pe-7s-map-marker pe-2x pe-va&quot;&gt;&lt;/i&gt; pe-7s-map-marker&lt;/p&gt;
&lt;p&gt;&lt;i class=&quot;pe-7s-map-marker pe-3x pe-va&quot;&gt;&lt;/i&gt; pe-7s-map-marker&lt;/p&gt;
&lt;p&gt;&lt;i class=&quot;pe-7s-map-marker pe-4x pe-va&quot;&gt;&lt;/i&gt; pe-7s-map-marker&lt;/p&gt;
&lt;p&gt;&lt;i class=&quot;pe-7s-map-marker pe-5x pe-va&quot;&gt;&lt;/i&gt; pe-7s-map-marker&lt;/p&gt;
</code></pre>
		      <div class="alert alert-success">
		        <i class="pe-7s-attention pe-lg"></i> If your icons are getting chopped off on top and bottom, make sure you have
		        sufficient line-height. pe-7s-attention
		      </div>
		    </div>
		  </div>
		</section>


<section id="fixed-width">
  <h2 class="page-header">Fixed Width Icons</h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <ul class="nav nav-pills nav-stacked margin-bottom">
        <li class="active"><a href="#"><i class="pe-7s-home pe-fw"></i>&nbsp; Home</a></li>
        <li><a href="#"><i class="pe-7s-culture pe-fw"></i>&nbsp; Library</a></li>
        <li><a href="#"><i class="pe-7s-browser pe-fw"></i>&nbsp; Applications</a></li>
        <li><a href="#"><i class="pe-7s-config pe-fw"></i>&nbsp; Settings</a></li>
      </ul>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        Use <code>pe-fw</code> to set icons at a fixed width. Great to use when variable icon widths throw off alignment.
        Especially useful in things like nav lists. <span class="italic">(Reminder: nav list classes in the example are from bootstrap)</span>
      </p>
<pre class="language-markup"><code>&lt;ul class="nav nav-pills nav-stacked"&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="pe-7s-home pe-fw"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="pe-7s-culture pe-fw"&gt;&lt;/i&gt; Library&lt;/a&gt;&lt;/li&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="pe-7s-browser pe-fw"&gt;&lt;/i&gt; Applications&lt;/a&gt;&lt;/li&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="pe-7s-config pe-fw"&gt;&lt;/i&gt; Settings&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
    </div>
  </div>
</section>


<section id="list">
  <h2 class="page-header">List Icons</h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <ul class="pe-ul">
        <li><i class="pe-li pe-7s-star"></i>List icons (like these)</li>
        <li><i class="pe-li pe-7s-angle-right"></i>can be used</li>
        <li><i class="pe-li pe-spin pe-7s-help2"></i>to easily replace</li>
        <li><i class="pe-li pe-7s-play"></i>default bullets in lists</li>
      </ul>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>Use <code>pe-ul</code> and <code>pe-li</code> to easily replace default bullets in unordered lists.</p>
<pre class="language-markup"><code>&lt;ul class="pe-ul"&gt;
&lt;li&gt;&lt;i class="pe-li pe-7s-star"&gt;&lt;/i&gt; List icons (like these) &lt;/li&gt;
&lt;li&gt;&lt;i class="pe-li pe-7s-angle-right"&gt;&lt;/i&gt; can be used &lt;/li&gt;
&lt;li&gt;&lt;i class="pe-li pe-spin pe-7s-help2"&gt;&lt;/i&gt; to replace &lt;/li&gt;
&lt;li&gt;&lt;i class="pe-li pe-7s-play"&gt;&lt;/i&gt; default bullets in lists &lt;/li&gt;
&lt;/ul&gt;</code></pre>
    </div>
  </div>
</section>

<section id="bordered-pulled">
  <h2 class="page-header">Bordered &amp; Pulled Icons</h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p>
        <i class="pe pe-7s-chat pe-2x pull-left pe-border"></i>
        Use a few styles together and you'll have easy pull quotes or a great introductory article icon.
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        Use <code>pe-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
        article graphics.
      </p>
<pre class="language-markup"><code>&lt;i class="pe pe-7s-chat pe-2x pull-left pe-border"&gt;&lt;/i&gt;
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.</code></pre>
    </div>
  </div>
</section>

<section id="spinning">
  <h2 class="page-header">Spinning Icons</h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p>
        <i class="pe-7s-science pe-2x pe-spin"></i>
        <i class="pe-7s-refresh pe-2x pe-spin"></i>
        <i class="pe-7s-config pe-2x pe-spin"></i>
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        Use the <code>pe-spin</code> class to get any icon to rotate. Works well with <code>pe-7s-science</code>,
        <code>pe-7s-refresh</code>, and <code>pe-7s-config</code>.
      </p>
<pre class="language-markup"><code>&lt;i class="pe-7s-science pe-spin"&gt;&lt;/i&gt;
&lt;i class="pe-7s-refresh pe-spin"&gt;&lt;/i&gt;
&lt;i class="pe-7s-config pe-spin"&gt;&lt;/i&gt;</code></pre>
      <p class="alert alert-success">
        <i class="fa fa-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9.
      </p>
    </div>
  </div>
</section>

<section id="rotated-flipped">
  <h2 class="page-header">Rotated &amp; Flipped</h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p style="font-size: 18px;">
        <i class="pe-7s-graph3"></i>&nbsp; normal<br>
        <i class="pe-7s-graph3 pe-rotate-90"></i>&nbsp; fa-rotate-90<br>
        <i class="pe-7s-graph3 pe-rotate-180"></i>&nbsp; fa-rotate-180<br>
        <i class="pe-7s-graph3 pe-rotate-270"></i>&nbsp; fa-rotate-270<br>
        <i class="pe-7s-graph3 pe-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
        <i class="pe-7s-graph3 pe-flip-vertical"></i>&nbsp; fa-flip-vertical
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes.
      </p>
<pre class="language-markup"><code>&lt;i class="pe-7s-graph3"&gt;&lt;/i&gt;&amp;nbsp; normal&lt;br&gt;
&lt;i class="pe-7s-graph3 pe-rotate-90"&gt;&lt;/i&gt;&amp;nbsp; pe-rotate-90&lt;br&gt;
&lt;i class="pe-7s-graph3 pe-rotate-180"&gt;&lt;/i&gt;&amp;nbsp; pe-rotate-180&lt;br&gt;
&lt;i class="pe-7s-graph3 pe-rotate-270"&gt;&lt;/i&gt;&amp;nbsp; pe-rotate-270&lt;br&gt;
&lt;i class="pe-7s-graph3 pe-flip-horizontal"&gt;&lt;/i&gt;&amp;nbsp; pe-flip-horizontal&lt;br&gt;
&lt;i class="pe-7s-graph3 pe-flip-vertical"&gt;&lt;/i&gt;&amp;nbsp; pe-flip-vertical</code></pre>
    </div>
  </div>
</section>

<section id="stacked">
  <h2 class="page-header">Stacked Icons</h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <div class="margin-bottom">
        <span class="pe-stack pe-lg">
          <i class="pe-7s-monitor pe-stack-2x"></i>
          <i class="pe-7s-graph3 pe-stack-1x"></i>
        </span>
        <br>pe-7s-graph3 on pe-7s-monitor<br>
        <span class="pe-stack pe-lg">
          <i class="pe-7s-cloud pe-stack-2x blue"></i>
          <i class="pe-7s-gleam pe-stack-1x yellow"></i>
        </span>
        <br>pe-7s-gleam on pe-7s-cloud<br>
        <span class="pe-stack pe-lg">
          <i class="pe-7s-albums pe-stack-2x"></i>
          <i class="pe-7s-look pe-stack-1x"></i>
        </span>
        <br>pe-7s-look on pe-7s-albums<br>
        <span class="pe-stack pe-lg">
          <i class="pe-7s-umbrella pe-stack-2x red"></i>
          <i class="pe-7s-drop pe-stack-1x blue"></i>
        </span>
        <br>pe-7s-drop on pe-7s-umbrella
      </div>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        To stack multiple icons, use the <code>pe-stack</code> class on the parent, the <code>pe-stack-1x</code>
        for the regularly sized icon, and <code>pe-stack-2x</code> for the larger icon. <code>pe-inverse</code>
        can be used as an alternative icon color and you can add your own color palette for more variations.
      </p>
<pre class="language-markup"><code>&lt;span class="pe-stack pe-lg"&gt;
  &lt;i class="pe-7s-monitor pe-stack-2x"&gt;&lt;/i&gt;
  &lt;i class="pe-7s-graph3 pe-stack-1x"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;br&gt;pe-7s-graph3 on pe-7s-monitor&lt;br&gt;
&lt;span class="pe-stack pe-lg"&gt;
  &lt;i class="pe-7s-cloud pe-stack-2x blue"&gt;&lt;/i&gt;
  &lt;i class="pe-7s-gleam pe-stack-1x yellow"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;br&gt;pe-7s-gleam on pe-7s-cloud&lt;br&gt;
&lt;span class="pe-stack pe-lg"&gt;
  &lt;i class="pe-7s-albums pe-stack-2x"&gt;&lt;/i&gt;
  &lt;i class="pe-7s-look pe-stack-1x"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;br&gt;pe-7s-look on pe-7s-albums&lt;br&gt;
&lt;span class="pe-stack pe-lg"&gt;
  &lt;i class="pe-7s-umbrella pe-stack-2x red"&gt;&lt;/i&gt;
  &lt;i class="pe-7s-drop pe-stack-1x blue"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;br&gt;pe-7s-drop on pe-7s-umbrella</code></pre>
    </div>
  </div>
</section>

	</div> <!-- /container-->
</section> <!-- /hero_box -->


<footer class="main-footer">
	<div class="container">
		<p>
			2014 © stroke Icon Font Set by Pixeden.
			<br/> Version · 1.2.0
		</p>
	</div>
</footer>

</div> <!-- /wrapper -->


<!-- Scripts -->
<script type="text/javascript" src="assets/libs/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/libs/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/libs/js/prism.js"></script>


</body>
</html>