OBE:BS4 ICONS
A set of default FontAwesome 5 elements and components, formatted exclusively with FontAwesome 5 and Bootstrap 4 classes.
These are the FontAwesome 5 relative icons sizes. These sizes are relative to the parent element, and go up to a maximum of 10x bigger, relatively.
<i class="fas fa-home fa-xs"></i>
<i class="fas fa-home fa-sm"></i>
<i class="fas fa-home"></i>
<i class="fas fa-home fa-lg"></i>
<i class="fas fa-home fa-2x"></i>
<i class="fas fa-home fa-3x"></i>
<i class="fas fa-home fa-4x"></i>
<i class="fas fa-home fa-5x"></i>
<i class="fas fa-home fa-6x"></i>
<i class="fas fa-home fa-7x"></i>
<i class="fas fa-home fa-8x"></i>
<i class="fas fa-home fa-9x"></i>
<i class="fas fa-home fa-10x"></i>
These are your FontAwesome 5 border options.
<span class="d-inline-block border border-light border-width-4" style="height: 1.8rem; width: 1.8rem; padding-top: 0px;">
<i class="fas fa-arrow-right fa-sm"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 2rem; width: 2rem; padding-top: 2px;">
<i class="fas fa-arrow-right"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 3rem; width: 3rem; padding-top: 5px;">
<i class="fas fa-arrow-right fa-2x"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 4rem; width: 4rem; padding-top: 5px;">
<i class="fas fa-arrow-right fa-3x"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 5rem; width: 5rem; padding-top: 5px;">
<i class="fas fa-arrow-right fa-4x"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 6rem; width: 6rem; padding-top: 5px;">
<i class="fas fa-arrow-right fa-5x"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 7rem; width: 7rem; padding-top: 5px;">
<i class="fas fa-arrow-right fa-6x"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 8rem; width: 8rem; padding-top: 5px;">
<i class="fas fa-arrow-right fa-7x"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 9rem; width: 9rem; padding-top: 5px;">
<i class="fas fa-arrow-right fa-8x"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 10rem; width: 10rem; padding-top: 5px;">
<i class="fas fa-arrow-right fa-9x"></i>
</span>
<span class="d-inline-block border border-light border-width-4" style="height: 11rem; width: 11rem; padding-top: 5px;">
<i class="fas fa-arrow-right fa-10x"></i>
</span>
These are your FontAwesome 5 float options.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.
<div class="text-left">
<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.
<div class="text-left">
<i class="fas fa-quote-right fa-2x fa-pull-right"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas nulla at mauris malesuada viverra. Aenean consequat ante ipsum, quis imperdiet ipsum fermentum vitae. Vivamus consectetur metus sit amet justo maximus, non volutpat nunc sollicitudin. Vivamus vel pharetra ex, eget rhoncus neque. Aenean at mollis lorem, et dapibus odio.</p>
</div>
This is how you use fixed width FontAwesome 5 icons (mainly for lists and navigation elements.)
<ul class="list-unstyled text-left">
<li><i class="fas fa-home fa-fw"></i> Home</li>
<li><i class="fas fa-info fa-fw"></i> Info</li>
<li><i class="fas fa-pencil-alt fa-fw"></i> Edit</li>
<li><i class="fas fa-phone fa-fw"></i> Call</li>
</ul>
This is how you use FontAwesome 5 utility classes to make icons act as bullets for list elements (which include the fixed width FontAwesome CSS, too!)
<ul class="fa-ul text-left">
<li><span class="fa-li"><i class="fas fa-home"></i></span>Home Icon</li>
<li><span class="fa-li"><i class="fas fa-info"></i></span>Info Icon</li>
<li><span class="fa-li"><i class="fas fa-pencil-alt"></i></span>Pencil Icon</li>
<li><span class="fa-li"><i class="fas fa-phone"></i></span>Phone Icon</li>
</ul>
<ol class="fa-ul text-left">
<li><span class="fa-li"><i class="fas fa-home"></i></span>Home Icon</li>
<li><span class="fa-li"><i class="fas fa-info"></i></span>Info Icon</li>
<li><span class="fa-li"><i class="fas fa-pencil-alt"></i></span>Pencil Icon</li>
<li><span class="fa-li"><i class="fas fa-phone"></i></span>Phone Icon</li>
</ol>
<ul class="list-unstyled text-left">
<li class="d-flex align-items-start mb-1">
<i class="fas fa-circle fa-xs mr-3"></i>
<span>Lorem ipsum dolor sit amet orem ipsum dolor sit amet dolor sit amet orem ipsum dolor</span>
</li>
<li class="d-flex align-items-start mb-1">
<i class="fas fa-circle fa-xs text-primary mr-3"></i>
<span>Lorem ipsum dolor sit amet orem ipsum dolor sit amet dolor sit amet orem ipsum dolor</span>
</li>
<li>
<ul class="list-unstyled pl-5">
<li class="d-flex align-items-start mb-1">
<i class="fas fa-circle fa-xs text-primary mr-3"></i>
<span>Lorem ipsum dolor sit amet orem ipsum dolor sit amet dolor sit amet orem ipsum dolor</span>
</li>
</ul>
</li>
<li class="d-flex align-items-start mb-1">
<i class="fas fa-circle fa-xs mr-3"></i>
<span>Lorem ipsum dolor sit amet orem ipsum dolor sit amet dolor sit amet orem ipsum dolor</span>
</li>
</ul>
These are examples of animated icon checkbox elements that you can use in web forms or for general user interactions.
<label class="d-block">Square Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start fade-and-scale-animation">
<div class="obe-checkbox-icon bg-primary">
<i class="fas fa-sm fa-fw fa-check text-white"></i>
</div>
<div class="pl-2">Square Icon Checkbox</div>
</div>
<input type="hidden" name="square-icon-checkbox" value="checked">
</div>
<label class="d-block">Round Square Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start fade-and-scale-animation">
<div class="obe-checkbox-icon rounded bg-primary">
<i class="fas fa-sm fa-fw fa-check text-white"></i>
</div>
<div class="pl-2">Round Square Icon Checkbox</div>
</div>
<input type="hidden" name="round-square-icon-checkbox" value="checked">
</div>
<label class="d-block">Circular Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start fade-and-scale-animation">
<div class="obe-checkbox-icon rounded-circle bg-primary">
<i class="fas fa-sm fa-fw fa-check text-white"></i>
</div>
<div class="pl-2">Circular Icon Checkbox</div>
</div>
<input type="hidden" name="circular-square-icon-checkbox" value="checked">
</div>
<label class="d-block">Square Outline Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start fade-and-scale-animation">
<div class="obe-checkbox-icon border border-primary border-width-2">
<i class="fas fa-sm fa-fw fa-check text-primary"></i>
</div>
<div class="pl-2">Square Outline Icon Checkbox</div>
</div>
<input type="hidden" name="square-outline-icon-checkbox" value="checked">
</div>
<label class="d-block">Round Square Outline Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start fade-and-scale-animation">
<div class="obe-checkbox-icon rounded border border-primary border-width-2">
<i class="fas fa-sm fa-fw fa-check text-primary"></i>
</div>
<div class="pl-2">Round Square Outline Icon Checkbox</div>
</div>
<input type="hidden" name="rounded-square-outline-icon-checkbox" value="checked">
</div>
<label class="d-block">Circle Outline Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start fade-and-scale-animation">
<div class="obe-checkbox-icon rounded-circle border border-primary border-width-2">
<i class="fas fa-sm fa-fw fa-check text-primary"></i>
</div>
<div class="pl-2">Circle Outline Icon Checkbox</div>
</div>
<input type="hidden" name="circle-outline-icon-checkbox" value="checked">
</div>
<label class="d-block">Square Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start spin-animation">
<div class="obe-checkbox-icon bg-primary">
<i class="fas fa-sm fa-fw fa-times text-white"></i>
</div>
<div class="pl-2">Square Icon Checkbox</div>
</div>
<input type="hidden" name="square-icon-checkbox" value="checked">
</div>
<label class="d-block">Round Square Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start spin-animation">
<div class="obe-checkbox-icon rounded bg-primary">
<i class="fas fa-sm fa-fw fa-times text-white"></i>
</div>
<div class="pl-2">Round Square Icon Checkbox</div>
</div>
<input type="hidden" name="round-square-icon-checkbox" value="checked">
</div>
<label class="d-block">Circular Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start spin-animation">
<div class="obe-checkbox-icon rounded-circle bg-primary">
<i class="fas fa-sm fa-fw fa-times text-white"></i>
</div>
<div class="pl-2">Circular Icon Checkbox</div>
</div>
<input type="hidden" name="circular-square-icon-checkbox" value="checked">
</div>
<label class="d-block">Square Outline Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start spin-animation">
<div class="obe-checkbox-icon border border-primary border-width-2">
<i class="fas fa-sm fa-fw fa-times text-primary"></i>
</div>
<div class="pl-2">Square Outline Icon Checkbox</div>
</div>
<input type="hidden" name="square-outline-icon-checkbox" value="checked">
</div>
<label class="d-block">Round Square Outline Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start spin-animation">
<div class="obe-checkbox-icon rounded border border-primary border-width-2">
<i class="fas fa-sm fa-fw fa-times text-primary"></i>
</div>
<div class="pl-2">Round Square Outline Icon Checkbox</div>
</div>
<input type="hidden" name="rounded-square-outline-icon-checkbox" value="checked">
</div>
<label class="d-block">Circle Outline Icon Checkbox Label</label>
<div class="form-group mb-1">
<div class="obe-icon-checkbox d-flex flex-row justify-content-start align-items-start spin-animation">
<div class="obe-checkbox-icon rounded-circle border border-primary border-width-2">
<i class="fas fa-sm fa-fw fa-times text-primary"></i>
</div>
<div class="pl-2">Circle Outline Icon Checkbox</div>
</div>
<input type="hidden" name="circle-outline-icon-checkbox" value="checked">
</div>
This is how you can control the rotation of FontAwesome 5 icons.
<i class="fas fa-home fa-2x fa-rotate-90"></i>
<i class="fas fa-home fa-2x fa-rotate-180"></i>
<i class="fas fa-home fa-2x fa-rotate-270"></i>
<i class="fas fa-home fa-2x fa-flip-horizontal"></i>
<i class="fas fa-home fa-2x fa-flip-vertical"></i>
These examples demonstrate how shrink or increase the size of your icons (in context of the parent element) when the FontAwesome 5 JavaScript kicks in. NOTE: You can use any number (including decimals) to change the size. Each interger represents a 1/16em unit.
<i class="fas fa-magic" data-fa-transform="shrink-11.5"></i>
<i class="fas fa-magic" data-fa-transform="shrink-5"></i>
<i class="fas fa-magic" data-fa-transform="shrink-2"></i>
<i class="fas fa-magic" data-fa-transform="shrink-0.5"></i>
<i class="fas fa-magic" data-fa-transform=""></i>
<i class="fas fa-magic" data-fa-transform="grow-0.5"></i>
<i class="fas fa-magic" data-fa-transform="grow-2"></i>
<i class="fas fa-magic" data-fa-transform="grow-5"></i>
<i class="fas fa-magic" data-fa-transform="grow-11"></i>
These examples demonstrate how to position your icons (in context of the parent element) when the FontAwesome 5 JavaScript kicks in. NOTE: You can use any number (including decimals) to change the size. Each interger represents a 1/16em unit.
<i class="fas fa-2x fa-magic" data-fa-transform=""></i>
<i class="fas fa-2x fa-magic" data-fa-transform="up-10"></i>
<i class="fas fa-2x fa-magic" data-fa-transform="down-10"></i>
<i class="fas fa-2x fa-magic" data-fa-transform="left-10"></i>
<i class="fas fa-2x fa-magic" data-fa-transform="right-10"></i>
These examples demonstrate how rotate or flip the orientation of your icons (in context of the parent element) when the FontAwesome 5 JavaScript kicks in. NOTE: You can use any number (including negative values) to change the orientation. Each interger represents a single degree unit.
<i class="fas fa-magic" data-fa-transform=""></i>
<i class="fas fa-magic" data-fa-transform="rotate-90"></i>
<i class="fas fa-magic" data-fa-transform="rotate-180"></i>
<i class="fas fa-magic" data-fa-transform="rotate-270"></i>
<i class="fas fa-magic" data-fa-transform="rotate--90"></i>
<i class="fas fa-magic" data-fa-transform="rotate--180"></i>
<i class="fas fa-magic" data-fa-transform="rotate--270"></i>
<i class="fas fa-magic" data-fa-transform="flip-v"></i>
<i class="fas fa-magic" data-fa-transform="flip-h"></i>
<i class="fas fa-magic" data-fa-transform="flip-h flip-v"></i>
These examples demonstrate how to combine two icons, where one icon knocks-out the other icon when the FontAwesome 5 JavaScript kicks in. NOTE: This allows you to show the background color underneath the resulting SVG where any fill was knocked-out.
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-0.5" data-fa-mask="fas fa-comment"></i>
<i class="fab fa-facebook-f text-light" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle"></i>
<i class="fas fa-headphones text-light" data-fa-transform="shrink-6" data-fa-mask="fas fa-square"></i>
<i class="far fa-star" data-fa-transform="shrink-10 up-2" data-fa-mask="fas fa-map-marker"></i>
<i class="fas fa-thumbs-up" data-fa-transform="shrink-9 up-0.5 rotate--30" data-fa-mask="fas fa-certificate"></i>
<i class="fas fa-file-upload" data-fa-transform="shrink-8 down-3" data-fa-mask="fas fa-cloud"></i>
<i class="far fa-star text-light" data-fa-transform="shrink-6" data-fa-mask="fas fa-star"></i>
<i class="far fa-clock text-light" data-fa-transform="shrink-8 down-3" data-fa-mask="fas fa-calendar"></i>
These examples demonstrate how to layer mulitple icons on top of each other, and with each icon having independent colors.
<span class="fa-layers fa-fw">
<i class="fas fa-circle text-danger"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-bookmark text-light"></i>
<i class="fas fa-heart text-danger" data-fa-transform="shrink-10 up-2"></i>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-play text-primary" data-fa-transform="rotate--90 grow-2"></i>
<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" style="font-size: 1.5rem; position: relative; left: 50%; top: 69%;">28</span>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" style="font-size: 0.75rem; position: relative; left: 50%; top: 50%;">NEW</span>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter bg-danger">1,419</span>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter fa-layers-top-left bg-danger">1,419</span>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter fa-layers-bottom-left bg-danger">1,419</span>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter fa-layers-bottom-right bg-danger">1,419</span>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter fa-layers-top-right bg-danger">1,419</span>
</span>
These are examples of stacked FontAwesome 5 icons.
Please Note: To check for any new FontAwesome 5 "shape" icons that are best to use with stacks, check out this page!
<span class="fa-stack fa-xs">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-home fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-home fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-home fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-home fa-stack-1x text-light"></i>
</span>
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x text-info"></i>
<i class="fas fa-home fa-stack-1x text-primary"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-camera fa-stack-1x text-dark"></i>
<i class="fas fa-ban fa-stack-2x text-danger"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-certificate fa-stack-2x text-warning"></i>
<i class="fas fa-home fa-stack-1x text-light"></i>
</span>
<span class="fa-stack fa-2x">
<i class="far fa-heart fa-stack-2x text-danger"></i>
<i class="fas fa-heart fa-stack-1x text-danger"></i>
</span>
These are your FontAwesome 5 animation options.
Please Note: To check for any new FontAwesome 5 "spinner" icons that are designed to handle animation maths, check out this page!
<i class="fas fa-2x fa-asterisk fa-spin"></i>
<i class="fas fa-2x fa-certificate fa-spin"></i>
<i class="fas fa-2x fa-circle-notch fa-spin"></i>
<i class="fas fa-2x fa-cog fa-spin"></i>
<i class="fas fa-2x fa-compass fa-spin"></i>
<i class="far fa-2x fa-compass fa-spin"></i>
<i class="fas fa-2x fa-crosshairs fa-spin"></i>
<i class="fas fa-2x fa-life-ring fa-spin"></i>
<i class="far fa-2x fa-life-ring fa-spin"></i>
<i class="fas fa-2x fa-snowflake fa-spin"></i>
<i class="far fa-2x fa-snowflake fa-spin"></i>
<i class="fas fa-2x fa-spinner fa-spin"></i>
<i class="fas fa-2x fa-stroopwafel fa-spin"></i>
<i class="fas fa-2x fa-sun fa-spin"></i>
<i class="far fa-2x fa-sun fa-spin"></i>
<i class="fas fa-2x fa-sync fa-spin"></i>
<i class="fas fa-2x fa-asterisk fa-pulse"></i>
<i class="fas fa-2x fa-certificate fa-pulse"></i>
<i class="fas fa-2x fa-circle-notch fa-pulse"></i>
<i class="fas fa-2x fa-cog fa-pulse"></i>
<i class="fas fa-2x fa-compass fa-pulse"></i>
<i class="far fa-2x fa-compass fa-pulse"></i>
<i class="fas fa-2x fa-crosshairs fa-pulse"></i>
<i class="fas fa-2x fa-life-ring fa-pulse"></i>
<i class="far fa-2x fa-life-ring fa-pulse"></i>
<i class="fas fa-2x fa-snowflake fa-pulse"></i>
<i class="far fa-2x fa-snowflake fa-pulse"></i>
<i class="fas fa-2x fa-spinner fa-pulse"></i>
<i class="fas fa-2x fa-stroopwafel fa-pulse"></i>
<i class="fas fa-2x fa-sun fa-pulse"></i>
<i class="far fa-2x fa-sun fa-pulse"></i>
<i class="fas fa-2x fa-sync fa-pulse"></i>
This script technique is necessary to do any user interaction based changes to any FontAwesome 5 icons (due to the JS/SVG rendering process upon a page load).
<button id="icon-swap-example" class="btn btn-primary">CLICK ME <i class="fas fa-angle-right"></i></button>
<script>
// NOTE: This script should run before/outside any jQuery document.ready scripts
// NOTE: This script expects data-auto-replace-svg="nest" is set on your FontAwesome JS include
// NOTE: If you aren't using the nesting feature, then change the .find() string below from '[data-fa-i2svg] svg' to '[data-fa-i2svg]'
document.addEventListener('DOMContentLoaded', function () {
$('#icon-swap-example').on('click', function () {
$(this)
.find('[data-fa-i2svg] svg')
.toggleClass('fa-angle-right')
.toggleClass('fa-angle-down');
});
});
</script>
Since FontAwesome 5 dynamically replaces your HTML markup, when using the FontAwesome 5 SVG option with Bootstrap 4 and jQuery, you need to tell their script that you want any dynamic SVG code to be nested inside the HTML markup tag you use.
You'll need to use the attribute/value data-auto-replace-svg="nest" to ensure this nesting happens. The following code is already included in the OBE:B4 system, but here's what it should look like:
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" data-auto-replace-svg="nest"></script>