Elements:Icons
Icon Sets
AppStrap includes 4 iconsets with over 1150 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.
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.
Manipulate Icons
You can rotate or "flip" icons using the following classes.
.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:
-
.icon-bg-r: align right -
.icon-bg-b: align bottom -
.icon-bg-r-ol: align right with an overlap -
.icon-bg-l-ol: align left with an overlap -
.icon-bg-t-ol: align top with an overlap -
.icon-bg-b-ol: align bottom with an overlap
<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-append">
<button class="btn btn-dark" type="button">Get Callback</button>
</span>
</div>
</form>
</div>Request a callback!
<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-append">
<button class="btn btn-dark" type="button">Search</button>
</span>
</div>
</form>
</div>