Bootstrap Ornaments by osahan

Animated Icons

Toggleable animated icons.

Just add class toggler.

$("[data-toggle=icon]").on("click", function(){
  $(this).toggleClass('active');
});

Hamburger

Default Style: Use the .brgr .brgr-default.

Use any of these available classes:
Default .brgr-deafult, Primary .brgr-primary, Success .brgr-success, Info .brgr-info, Warning .brgr-warning, Danger .brgr-danger
Black .brgr-black, Dark Gray .brgr-dark-gray, Gray .brgr-gray

Left Hinged: Use the .brgr-left-hinge.

Thin version: Use the .brgr-thin.

<div data-toggle="icon">
    <a href="javascript:void(0)" class="brgr brgr-default brgr-left-hinge">
        <span></span>
    </a>
</div>

Right Hinged: Use the .brgr-right-hinge.

Thin version: Use the .brgr-thin.

<div data-toggle="icon">
    <a href="javascript:void(0)" class="brgr brgr-default brgr-right-hinge">
        <span></span>
    </a>
</div>

Chevron

Default Style: Use the .chevron .chevron-default.

Use any of these available classes:
Default .chevron-deafult, Primary .chevron-primary, Success .chevron-success, Info .chevron-info, Warning .chevron-warning, Danger .chevron-danger
Black .chevron-black, Dark Gray .chevron-dark-gray, Gray .chevron-gray

Thin version: Use the .chevron-thin.

<div data-toggle="icon">
    <a href="javascript:void(0)" class="chevron chevron-default">
        <span></span>
    </a>
</div>

Line to Chevron

Default Style: Use the .chevron .chevron-line .chevron-default.

Thin version: Use the .chevron-thin.

<div data-toggle="icon">
    <a href="javascript:void(0)" class="chevron chevron-line chevron-default">
        <span></span>
    </a>
</div>

Plus to Cross

Default Style: Use the .cross .cross-default.

Use any of these available classes:
Default .cross-deafult, Primary .cross-primary, Success .cross-success, Info .cross-info, Warning .cross-warning, Danger .cross-danger
Black .cross-black, Dark Gray .cross-dark-gray, Gray .cross-gray

Thin version: Use the .cross-thin.

<div data-toggle="icon">
    <a href="javascript:void(0)" class="cross cross-default">
        <span></span>
    </a>
</div>

Plus to Minus

Default Style: Use the .plusminus .plusminus-default.

Use any of these available classes:
Default .plusminus-deafult, Primary .plusminus-primary, Success .plusminus-success, Info .plusminus-info, Warning .plusminus-warning, Danger .plusminus-danger
Black .plusminus-black, Dark Gray .plusminus-dark-gray, Gray .plusminus-gray

Thin version: Use the .plusminus-thin.

<div data-toggle="icon">
    <a href="javascript:void(0)" class="plusminus plusminus-default">
        <span></span>
    </a>
</div>