Elements:Icons
Icon Sets
AppStrap includes 6 iconsets with 1000s of useful icons to make your content more eyecatching.
NOTE: The .css files for the icon packs are only loaded if they are detected in the source code so you just add icons & the css files with automatically be loaded for you! NOTE: for performance we recommend adopting just 1 icon pack for your project if possible.
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
.position-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
Request a callback!
<div class="bg-primary bg-shadow border-primary text-white p-4 pe-lg-6 mb-4 position-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 fw-bold text-uppercase">
Request a callback!
</h4>
<hr class="hr-lg my-2 ms-0 hr-white w-20">
<form id="callback-form" action="#">
<div class="input-group">
<label class="visually-hidden" for="callback-number">Your Number</label>
<input type="tel" class="form-control" id="callback-number" placeholder="Your Number">
<span class="input-group-text">
<button class="btn btn-dark" type="button">Get Callback</button>
</span>
</div>
</form>
</div>More Info:
<div class="bg-info bg-shadow border-primary text-white p-4 px-lg-6 position-relative">
<i class="fa fa-info-circle icon-10x icon-bg icon-bg-l-ol op-3 text-white"></i>
<h4 class="my-0 fw-bold text-uppercase">
More Info:
</h4>
<hr class="hr-lg my-2 ms-0 hr-white w-20">
<form id="callback-form" action="#">
<div class="input-group">
<label class="visually-hidden" for="callback-number">Search</label>
<input type="tel" class="form-control" id="callback-number" placeholder="Keyword">
<span class="input-group-text">
<button class="btn btn-dark" type="button">Search</button>
</span>
</div>
</form>
</div>