Icon Toggles (Checkbox)

Icon toggles are customized checkboxes to use with icon toggles. Icon toggles are much useful when you have icon toggle elements such as favourites, thumbs ups, thumbs downs etc.

Page Demo

Default stat (inactive)

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zmdi zmdi-flag"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zmdi zmdi-star"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zmdi zmdi-thumb-up"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zmdi zmdi-thumb-down"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zmdi zmdi-check"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zmdi zmdi-circle"></i>
</div>

Active stat (checked)

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-flag"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-star"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-thumb-up"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-thumb-down"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-check"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-circle"></i>
</div>

Color variants for active stats

You can set up to 5 active colors by using modifier classes

<div class="icon-toggle icon-toggle--blue">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-flag"></i>
</div>

<div class="icon-toggle icon-toggle--red">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-star"></i>
</div>

<div class="icon-toggle icon-toggle--green">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-thumb-up"></i>
</div>

<div class="icon-toggle icon-toggle--amber">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-thumb-down"></i>
</div>

<div class="icon-toggle icon-toggle--blue-grey">
    <input type="checkbox" checked>
    <i class="zmdi zmdi-circle"></i>
</div>

Requirements:

  • /scss/inc/vendor-overrides/_jquery-text-counter.scss
  • /vendors/jquery-text-counter/textcounter.min.js