<?php
/* ------------------------------------------------------------------------ *
 * Seja Framework Version 3.0
 *
 * 4.6 - Theme Help - Font Awesome
 * ------------------------------------------------------------------------ */
 
 function seja_font_awesome_options_usage_callback($args) { 
 
 	?>
	
    <div class="seja-help-wrapper"> 
    <h2>Basic Icons</h2>
    
    <div class="seja-help-left">
	<p><i class="fas fa-camera-retro"></i> fa-camera-retro</p>
    </div>
    
    <div class="seja-help-right">
	<p>You can place Font Awesome icons just about anywhere using the CSS Prefix <span class="highlight">fa</span>  and the icon's name. Font Awesome is designed to be used with inline elements (we like the <span class="highlight">&lt;i&gt;</span> tag for brevity, but using a <span class="highlight">&lt;span&gt;</span> is more semantically correct). </p>
	<pre><p><em>Example</em></p>
     &lt;i class=&quot;fas fa-camera-retro&quot;&gt;&lt;/i&gt; fa-camera-retro</pre>
    </div>
    </div>
    
    <div class="seja-help-left clear">
    	<div style="font-size:3em; color:Tomato">
			<i class="fas fa-camera-retro"></i>
		</div>
    </div>
    <div class="seja-help-right">
    <p>Font Awesome icons automatically inherit CSS size and color. This means they blend in with text inline wherever you put them.</p>
    <pre><p><em>Example</em></p>     &lt;div style=&quot;font-size:3em; color:Tomato&quot;&gt;
       &lt;i class=&quot;fas fa-camera-retro&quot;&gt;&lt;/i&gt;
     &lt;/div&gt;
</pre>
    </div>
    
    <div class="seja-help-wrapper">
	<h2>Larger Icons </h2>
    <div class="seja-help-left">
	<p><i class="fas fa-camera-retro fa-xs"></i><br>
    <i class="fas fa-camera-retro fa-sm"></i><br>
    <i class="fas fa-camera-retro fa-lg"></i><br>
    <i class="fas fa-camera-retro fa-2x"></i><br>
    <i class="fas fa-camera-retro fa-3x"></i><br>
    <i class="fas fa-camera-retro fa-5x"></i><br>
    <i class="fas fa-camera-retro fa-7x"></i><br>
    <i class="fas fa-camera-retro fa-10x"></i></p>
    </div>
    
    <div class="seja-help-right">
	<p>To increase icon sizes relative to their container, use the <span class="highlight">fa-lg</span> (33% increase), <span class="highlight">fa-2x</span>, <span class="highlight">fa-3x</span>, <span class="highlight">fa-4x</span>, or <span class="highlight">fa-5x</span> classes. </p>
    <pre><p><em>Examples</em></p>     &lt;i class=&quot;fas fa-camera-retro fa-xs&quot;&gt;&lt;/i&gt;
     &lt;i class=&quot;fas fa-camera-retro fa-sm&quot;&gt;&lt;/i&gt;
     &lt;i class=&quot;fas fa-camera-retro fa-lg&quot;&gt;&lt;/i&gt;
     &lt;i class=&quot;fas fa-camera-retro fa-2x&quot;&gt;&lt;/i&gt;
     &lt;i class=&quot;fas fa-camera-retro fa-3x&quot;&gt;&lt;/i&gt;
     &lt;i class=&quot;fas fa-camera-retro fa-5x&quot;&gt;&lt;/i&gt;
     &lt;i class=&quot;fas fa-camera-retro fa-7x&quot;&gt;&lt;/i&gt;
     &lt;i class=&quot;fas fa-camera-retro fa-10x&quot;&gt;&lt;/i&gt;
</pre>
    </div>
    </div>
    
    <div class="seja-help-wrapper">
    <h2>List Icons </h2>
    
    <div class="seja-help-left">
	  <ul class="fa-ul">
		<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
		<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
		<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
		<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
	  </ul>
	</div>
	
    <div class="seja-help-right">Use fa-ul and fa-li to replace default bullets in unordered lists.
      <pre><p><em>Examples</em></p>     &lt;ul class=&quot;fa-ul&quot;&gt;
       &lt;li&gt;&lt;span class=&quot;fa-li&quot;&gt;&lt;i class=&quot;fas fa-check-square&quot;&gt;&lt;/i&gt;&lt;/span&gt;List icons can&lt;/li&gt;
       &lt;li&gt;&lt;span class=&quot;fa-li&quot;&gt;&lt;i class=&quot;fas fa-check-square&quot;&gt;&lt;/i&gt;&lt;/span&gt;be used to&lt;/li&gt;
       &lt;li&gt;&lt;span class=&quot;fa-li&quot;&gt;&lt;i class=&quot;fas fa-spinner fa-pulse&quot;&gt;&lt;/i&gt;&lt;/span&gt;replace bullets&lt;/li&gt;
       &lt;li&gt;&lt;span class=&quot;fa-li&quot;&gt;&lt;i class=&quot;far fa-square&quot;&gt;&lt;/i&gt;&lt;/span&gt;in lists&lt;/li&gt;
     &lt;/ul&gt;</pre>
    </div>
    </div>
    
    <div class="seja-help-wrapper">
    <p><strong><a href="https://fontawesome.com/how-to-use/web-fonts-with-css">For more information and examples (including rotating and flipped icons) read the full article here</a></strong></p>
    
    <hr />
    </div>
    
      <?php
 }
 
 function seja_font_awesome_options_list_callback($args) { 
	 
	 ?>
    
    <div class="seja-help-wrapper"> 
    <h2>Some Font Awesome Icon Examples</h2>
    <p><em>This is a non-inclusive list of icons available</em></p>
    <p>FAS = Font-Awesome Solid<br />
      FAR = Font-Awesome Regular
    </p>
    
    <div class="seja-fa-displaycol"> <i class="fas fa-anchor">          </i> FAS anchor</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-arrows-alt-h">    </i> FAS arrows-alt-h</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-arrows-alt-v">    </i> FAS arrows-alt-v</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-ban">             </i> FAS ban</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-bars">            </i> FAS bars</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-battery-empty">   </i> FAS battery-empty</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-battery-full">    </i> FAS battery-full</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-battery-half">    </i> FAS battery-half</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-calculator">      </i> FAS calculator</div>
    <div class="seja-fa-displaycol"> <i class="far fa-calendar-alt">    </i> FAR calendar-alt</div>
    <div class="seja-fa-displaycol"> <i class="far fa-calendar-check">  </i> FAR calendar-check</div>
    <div class="seja-fa-displaycol"> <i class="far fa-calendar-minus">  </i> FAR calendar-minus</div>
    <div class="seja-fa-displaycol"> <i class="far fa-calendar">        </i> FAR calendar</div>
    <div class="seja-fa-displaycol"> <i class="far fa-calendar-plus">   </i> FAR calendar-plus</div>
    <div class="seja-fa-displaycol"> <i class="far fa-calendar-times">  </i> FAR calendar-times</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-cart-plus">       </i> FAS cart-plus</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-cog">             </i> FAS cog</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-cogs">            </i> FAS cogs</div>
    <div class="seja-fa-displaycol"> <i class="far fa-compass">         </i> FAR compass</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-envelope">        </i> FAS envelope</div>
    <div class="seja-fa-displaycol"> <i class="far fa-envelope">        </i> FAR envelope</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-fax">             </i> FAS fax</div>
    <div class="seja-fa-displaycol"> <i class="far fa-file-pdf">        </i> FAR file-pdf-o</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-globe">           </i> FAS globe</div>
    <div class="seja-fa-displaycol"> <i class="far fa-lightbulb">       </i> FAR lightbulb-o</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-lock">            </i> FAS lock</div>
    <div class="seja-fa-displaycol"> <i class="far fa-map">             </i> FAR map</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-music">           </i> FAS music</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-plus">            </i> FAS plus</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-plus-square">     </i> FAS plus-square</div>   
    <div class="seja-fa-displaycol"> <i class="far fa-plus-square">     </i> FAR plus-square-o</div>    
    <div class="seja-fa-displaycol"> <i class="fas fa-plus-circle">     </i> FAS plus-circle</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-power-off">       </i> FAS power-off</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-print">           </i> FAS print</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-sync-alt">        </i> FAS sync-alt</div>
    <div class="seja-fa-displaycol"> <i class="fas fa-rss">             </i> FAS rss</div>
    </div>
    
    <div class="seja-help-wrapper">
    <p><strong><a href="https://fontawesome.com/icons?d=gallery">For the full list read the full article here</a><?php /*</strong> or <strong><a href="<?php bloginfo( 'template_url' ); ?>/images/font-awesome-cheatsheet.pdf" target="_blank">Download the Cheatsheet</a></strong>*/ ?></p>
    </div>
    <?php
}
 
?>