Animated Icons

Use animated icons in content blocks that require user interaction. When the user hovers over the icon the animation will occur.

Animation will also run when active class is dynamically added to icon. Use this if you want the animation to occur when the user hovers over a content block that contains the icon. Example JavaScript is included in the source code below.

Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus nisi eget enim vehicula, a rutrum nulla eleifend. Morbi et ante vitae nunc tincidunt finibus ut eu lectus. Cras ut est urna. Etiam sit amet tellus fermentum, eleifend ex ac, pharetra neque. Nam fermentum sem sed ornare faucibus.

HTML

<div class="icon-animated icon-border">
    <i class="fa fa-phone"></i>
</div>
<div class="icon-animated icon-border-pop">
    <i class="fa fa-gift"></i>
</div>
<div class="icon-animated icon-dash">
    <i class="fa fa-home"></i>
</div>
<div class="icon-animated icon-dash-rotate">
    <i class="fa fa-leaf"></i>
</div>
<div class="icon-animated icon-border-pull">
    <i class="fa fa-lock"></i>
</div>
<div class="icon-animated icon-background-fade">
    <i class="fa fa-paw"></i>
</div>

Sass

.icon-animated { @include elr-icon-animated; }
.icon-border { @include elr-icon-border; }
.icon-border-pop { @include elr-icon-border-pop; }
.icon-dash { @include elr-icon-dash; }
.icon-dash-rotate { @include elr-icon-dash(true); }
.icon-border-pull { @include elr-icon-border-pull; }
.icon-background-fade { @include elr-icon-background-fade; }

JavaScript

$('.icon-holder').hover(function() {
    $(this).find('.icon-animated').toggleClass('active');
});

Hamburger Icons

Adds some extra clarity to the traditional hamburger style menu icons. Icon animates to active state;

Requires JavaScript to add an active class when a DOM event occurs. We recommend using a click event or adding the active class when a menu is opened. Example JavaScript is included in the source code below.

HTML

<button class="icon-animate icon-hamburger icon-close">
    <span></span>
</button>
<button class="icon-animate icon-hamburger icon-arrow-left">
    <span></span>
</button>
<button class="icon-animate icon-hamburger icon-arrow-right">
    <span></span>
</button>

Sass

.icon-hamburger { @include elr-hamburger; }
.icon-close { @include elr-icon-close; }
.icon-arrow-left { @include elr-icon-arrow('left'); }
.icon-arrow-right { @include elr-icon-arrow('right'); }

JavaScript

$('.icon-animate').on('click', function() {
    $(this).toggleClass('active');
});