{{#> 
	layouts/main 
	title="Base" 
	pagename="icons_webfonts_faq" 
	heading="Webfonts <span class='fw-300'>FAQ</span>" 
	category_1="Font Icons"   
	pagedescription="NextGen Icons description"
}}

{{#*inline "head-block"}}{{/inline}}

{{#*inline "content-block"}}

<div class="alert alert-primary">
    <div class="d-table w-100">
      <div class="d-table-cell align-middle width-6">
        <span class="icon-stack icon-stack-lg">
          <i class="base-2 icon-stack-3x color-primary-400"></i>
          <i class="base-3 icon-stack-2x color-primary-600 opacity-70"></i>
          <i class="{{iconPrefix}} fa-lightbulb icon-stack-1x text-white opacity-90"></i>
        </span>
      </div>
      <div class="d-table-cell align-middle pl-1">
        <span class="h5">What are Base Icons?</span>
        <br> Base Icons are primarily used as a 'base' layer for <strong>Stack Icons</strong>, but may also be used as regular general icons. To see base icons in action see the <a href="icons_stack_showcase.html" target="_blank">Stack Icons Showcase</a> page.
      </div>
    </div>
</div>

<div class="row">

    <div class="col-4 col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-center align-items-center mb-g">
        <div class="rounded bg-white p-0 m-0 d-flex flex-column w-100 h-100">
            <div class="rounded-top w-100 bg-primary-50">
                <div class="rounded-top d-flex align-items-center justify-content-center w-100 pt-3 pb-3 pr-2 pl-2 hover-bg">
                    <span class="icon-stack fa-6x">
                      <i class="base-2 icon-stack-3x color-primary-600"></i>
                      <i class="base-3 icon-stack-2x color-primary-700"></i>
                      <i class="ni ni-settings icon-stack-1x text-white"></i>
                    </span>
                </div>
            </div>
            <div class="rounded-bottom p-1 w-100 d-flex justify-content-center align-items-center text-center"> 
                <span class="d-block text-truncate text-muted">base-1</span> 
            </div>
        </div>
    </div>

    <div class="col-4 col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-center align-items-center mb-g">
        <div class="rounded bg-white p-0 m-0 d-flex flex-column w-100 h-100">
            <div class="rounded-top w-100 bg-warning-50">
                <div class="rounded-top d-flex align-items-center justify-content-center w-100 pt-3 pb-3 pr-2 pl-2 hover-bg">
                    <span class="icon-stack fa-6x">
                      <i class="base-9 icon-stack-3x color-success-400"></i>
                      <i class="base-2 icon-stack-2x color-success-500"></i>
                      <i class="ni ni-shield icon-stack-1x text-white"></i>
                    </span>
                </div>
            </div>
            <div class="rounded-bottom p-1 w-100 d-flex justify-content-center align-items-center text-center"> 
                <span class="d-block text-truncate text-muted">base-1</span> 
            </div>
        </div>
    </div>

    <div class="col-4 col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-center align-items-center mb-g">
        <div class="rounded bg-white p-0 m-0 d-flex flex-column w-100 h-100">
            <div class="rounded-top w-100 bg-info-50">
                <div class="rounded-top d-flex align-items-center justify-content-center w-100 pt-3 pb-3 pr-2 pl-2 hover-bg">
                    <span class="icon-stack fa-6x">
                      <i class="base-7 icon-stack-3x color-info-500"></i>
                      <i class="base-7 icon-stack-2x color-info-700"></i>
                      <i class="ni ni-graph icon-stack-1x text-white"></i>
                    </span>
                </div>
            </div>
            <div class="rounded-bottom p-1 w-100 d-flex justify-content-center align-items-center text-center"> 
                <span class="d-block text-truncate text-muted">base-1</span> 
            </div>
        </div>
    </div>

    <div class="col-4 col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-center align-items-center mb-g">
        <div class="rounded bg-white p-0 m-0 d-flex flex-column w-100 h-100">
            <div class="rounded-top w-100 bg-danger-50">
                <div class="rounded-top d-flex align-items-center justify-content-center w-100 pt-3 pb-3 pr-2 pl-2 hover-bg">
                    <span class="icon-stack fa-6x">
                      <i class="base-4 icon-stack-3x color-danger-500"></i>
                      <i class="base-4 icon-stack-1x color-danger-400"></i>
                      <i class="ni ni-envelope icon-stack-1x text-white"></i>
                    </span>
                </div>
            </div>
            <div class="rounded-bottom p-1 w-100 d-flex justify-content-center align-items-center text-center"> 
                <span class="d-block text-truncate text-muted">base-1</span> 
            </div>
        </div>
    </div>

    <div class="col-4 col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-center align-items-center mb-g">
        <div class="rounded bg-white p-0 m-0 d-flex flex-column w-100 h-100">
            <div class="rounded-top w-100 bg-warning-50">
                <div class="rounded-top d-flex align-items-center justify-content-center w-100 pt-3 pb-3 pr-2 pl-2 hover-bg">
                    <span class="icon-stack fa-6x">
                      <i class="base-16 icon-stack-3x color-fusion-500"></i>
                      <i class="base-10 icon-stack-1x color-primary-50 opacity-30"></i>
                      <i class="base-10 icon-stack-1x fs-xl color-primary-50 opacity-20"></i>
                      <i class="{{iconPrefix}} fa-dot-circle icon-stack-1x text-white opacity-85"></i>
                    </span>
                </div>
            </div>
            <div class="rounded-bottom p-1 w-100 d-flex justify-content-center align-items-center text-center"> 
                <span class="d-block text-truncate text-muted">base-1</span> 
            </div>
        </div>
    </div>

    <div class="col-4 col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-center align-items-center mb-g">
        <div class="rounded bg-white p-0 m-0 d-flex flex-column w-100 h-100">
            <div class="rounded-top w-100 bg-warning-50">
                <div class="rounded-top d-flex align-items-center justify-content-center w-100 pt-3 pb-3 pr-2 pl-2 hover-bg">
                    <span class="icon-stack fa-6x">
                      <i class="base-19 icon-stack-3x color-primary-400"></i>
                      <i class="base-7 icon-stack-2x color-primary-300"></i>
                      <i class="base-7 icon-stack-1x fs-xxl color-primary-200"></i>
                      <i class="base-7 icon-stack-1x color-primary-500"></i>
                      <i class="{{iconPrefix}} fa-globe icon-stack-1x text-white opacity-85"></i>
                    </span>
                </div>
            </div>
            <div class="rounded-bottom p-1 w-100 d-flex justify-content-center align-items-center text-center"> 
                <span class="d-block text-truncate text-muted">base-1</span> 
            </div>
        </div>
    </div>
    
</div>


{{/inline}}

{{#*inline "scripts-block"}}{{/inline}}

{{/layouts/main}}