GENIUX

Icons

Geniux use two awesome icon collections, Font Awesome and ET-Line Icons.
They are completely free and display gorgeous on high-resolution displays.

Font Awesome

One Font, 675 Icons, originally designed for Bootstrap, Font Awesome works great with all frameworks.

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements Geniux use the <i> tag for brevity.

Usage example:

 <i class="fa fa-camera-retro"></i>

Larger Icons

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x

<i class="fa fa-camera-retro fa-3x"></i> fa-3x

<i class="fa fa-camera-retro fa-4x"></i> fa-4x

<i class="fa fa-camera-retro fa-5x"></i> fa-5x
For more info or to know more how to use this icon set visit: https://fontawesome.com/v4.7.0/

ET-Line Icons

Completely free to use, this free line-style icon set ships with a total of 100 different icons.

Usage example:

<!-- Use the following if you want to use class selectors-->
<i class="icon-mobile"></i>

<!-- Use the following if you want to use data attributes.-->
<i data-icon="&#xe000;"></i>

NOTE: The results are visually the same, but we will be using the class method so that we can easily style the icons using external CSS.

Icons size

To change icon sizes relative to their container, use the following classes:

  • icon-xs  (font-size = 20px)
  • icon-sm (font-size = 30px)
  • icon-md (font-size = 40px)
  • icon-lg   (font-size = 50px)

Usage example:

<!-- Add the icon-lg class to the class selector-->
<i class="icon-mobile icon-lg"></i>

Large Icon
For more info or to know more how to use this icon set visit: https://github.com/pprince/etlinefont-bower