Icon Libraries
Guidance and suggestions for using icon libraries with Bootstrap.
Custom SVG icons
Front includes Series of pixel-perfect SVG icons.
To unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, Front uses SVGInjector plugin. For more information, see SVG page.
How to use?
Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/hs.svg-injector.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Font Awesome 5
Front includes the world's most popular and easiest to use icon set - Font Awesome 5 - with over 1,340 free icons.
How to use
Place this code, which contains everything you need, within the <head> of each template or page that you want to use Font Awesome on.
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">
You need to know two bits of information to reference an icon:
- Its name, prefixed with
fa- - The style you want to use's corresponding prefix.
<span class="fas fa-stroopwafel"></span>
<!--
1) style prefix == fas
2) icon name == stroopwafel
-->
| Style | Style Prefix | Example | Rendering |
|---|---|---|---|
| Solid |
|
<span class="fas fa-stroopwafel"></span> |
|
| Brands |
|
<span class="fab fa-font-awesome"></span> |
|
Since Font Awesome was first implemented and continues to support being rendered using the CSS @font-face method, each of its styles corresponds to a particular font weight:
| Style | @font-face weight |
|---|---|
| Solid | 900 |
| Brands | 400 |
Why would I need font-weight values?
While using an <span> or other HTML element is the most popular and easy way to render an icon, we do have advanced ways using custom written CSS pseudo elements if you prefer to have extra markup. Font weights are used with that technique and are how you would set the icon's style.