5.0 Icons

Ev-fdm comes with a handful of helpful icon to bootstrap easily your application. They can be override with more furnish set of icons easily. You can indeed add, remove, or replace svg from the /core/iconfont folder. The iconfont will update when compiling.

To use an icon, simply add icon-<name> class to a span or a i tag.

<i class="icon-home"></i>

5.1 Sizing & colour

You can modify the size or the colour of an icon very easily

  • .text-gold

    An icon colour gold (see the helper section for more info on colour classes)
  • .icon-lg

    An icon a little bit more large
  • .icon-2x

    An icon 2x larger
  • .icon-3x

    An icon 3x larger
  • .icon-4x

    An icon 4x larger
  • .icon-5x

    An icon 5x larger

     
<i class="icon-home {$modifiers}"></i>

5.2 Rotation

You can rotate your icon or spin them.

  • .icon-quarter-turn

    Rotate 90 degree
  • .icon-half-turn

    Rotate 180 degree
  • .icon-minus-quarter-turn

    Rotate 270 degree

     
<i class="icon-triangle {$modifiers}"></i>

5.3 Spinning & transition

You can add your icon or spin them

  • .icon-spin

    The icons spin infinitly.
  • .icon-transition

    Enable transition on rotation, for a smoother expercience.

     
<i class="icon-triangle icon-half-turn {$modifiers}"></i>

5.4 Default icons

The complete list of default icons

  • .icon-arrow-down

    arrow-down icon
  • .icon-arrow-left

    arrow-left icon
  • .icon-arrow-right

    arrow-right icon
  • .icon-arrow-up

    arrow-up icon
  • .icon-article

    article icon
  • .icon-attached

    attached icon
  • .icon-bin

    bin icon
  • .icon-calendar

    calendar icon
  • .icon-camera

    camera icon
  • .icon-clock

    clock icon
  • .icon-create

    create icon
  • .icon-cross

    cross icon
  • .icon-discussions

    discussions icon
  • .icon-display-hierarchical

    display-hierarchical icon
  • .icon-download

    download icon
  • .icon-edit

    edit icon
  • .icon-eye

    eye icon
  • .icon-filter

    filter icon
  • .icon-filters

    filters icon
  • .icon-fold

    fold icon
  • .icon-handle

    handle icon
  • .icon-help

    help icon
  • .icon-home

    home icon
  • .icon-infos

    infos icon
  • .icon-mail

    mail icon
  • .icon-note

    note icon
  • .icon-read

    read icon
  • .icon-refresh

    refresh icon
  • .icon-search

    search icon
  • .icon-settings

    settings icon
  • .icon-star-empty

    star-empty icon
  • .icon-star-mid

    star-mid icon
  • .icon-star

    star icon
  • .icon-stats

    stats icon
  • .icon-tick

    tick icon
  • .icon-triangle

    triangle icon
  • .icon-unfold

    unfold icon
  • .icon-users

    users icon
  • .icon-warning

    warning icon

     
<i class="{$modifiers}"></i>