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

fas

<span class="fas fa-stroopwafel"></span>
Brands

fab

<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