Skip to content

Elements:Icons

Icon Sets

AppStrap includes 4 iconsets with over 1830 useful icons to make your content more eyecatching.

Iconsets included are:


Icon Sizes

To increase icon sizes relative to their container, use icon-2x , icon-3x , icon-4x , icon-5x , icon-6x , icon-7x , icon-8x , icon-9x or icon-10x classes.

icon-2x
icon-3x
icon-4x
icon-5x
icon-6x
icon-7x
icon-8x
icon-9x
icon-10x
icon-15x
icon-20x
icon-25x
icon-30x

Square icons (fixed size)

Add the class .icon-sq to make icons a square ie. fixed height & width. You can combine this with the above size classes up size 10x & also the contextual background colours.

icon-2x
icon-3x
icon-4x
icon-5x
icon-6x
icon-7x
icon-8x
icon-9x
icon-10x

Manipulate Icons

You can rotate or "flip" icons using the following classes.

default
.icon-rotate-25
.icon-rotate-45
.icon-rotate-90
.icon-rotate-180
.icon-rotate-270
.icon-flip-h
.icon-flip-v

Background Icons

Icons can also be used in the background of elements add wrapping the parent element with the class .pos-relative and then adding the class .icon-bg to the icon.

You can control the opacity of the icon using the op-(1-9) classes.

By default icons are aligned to the top left but you can override this using the following classes:

  1. .icon-bg-r : align right
  2. .icon-bg-b : align bottom
  3. .icon-bg-r-ol : align right with an overlap
  4. .icon-bg-l-ol : align left with an overlap
  5. .icon-bg-t-ol : align top with an overlap
  6. .icon-bg-b-ol : align bottom with an overlap

View code example
<div class="bg-primary bg-shadow border-primary-darkend text-white p-4 pr-lg-6 mb-4 pos-relative">
<i class="fa fa-phone-square icon-10x icon-rotate-25 icon-bg icon-bg-r-ol icon-bg-b-ol op-3 text-white"></i>

<h4 class="my-0 font-weight-bold text-uppercase">Request a callback!</h4>
<hr class="hr-lg my-2 ml-0 hr-white w-20" />
<form id="callback-form" action="#" role="form">
  <div class="input-group">
    <label class="sr-only" for="callback-number">Your Number</label>
    <input type="tel" class="form-control" id="callback-number" placeholder="Your Number">
    <span class="input-group-btn">
      <button class="btn btn-dark" type="button">Get Callback</button>
    </span>
  </div>
</form>		
</div>

Request a callback!


View code example
<div class="bg-info bg-shadow border-primary-darkend text-white p-4 px-lg-6 pos-relative">
<i class="fa fa-info-circle icon-10x icon-bg icon-bg-l-ol op-3 text-white"></i>

<h4 class="my-0 font-weight-bold text-uppercase">More Info:</h4>
<hr class="hr-lg my-2 ml-0 hr-white w-20" />
<form id="callback-form" action="#" role="form">
  <div class="input-group">
    <label class="sr-only" for="callback-number">Search</label>
    <input type="tel" class="form-control" id="callback-number" placeholder="Keyword">
    <span class="input-group-btn">
      <button class="btn btn-dark" type="button">Search</button>
    </span>
  </div>
</form>		
</div>

More Info:


Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page