Skip to Content

iconpeek()

Prepend an icon to a link that slides in on hover.

Sass January 1, 2018

Usage

Sass
iconpeek($icon)

Parameters

$icon
(Optional) (String) Escaped unicode character string from Font Awesome
Default: f061

$style
(Optional) (String) Font Awesome 5 Style (Solid, Regular, Light, Brands)
Default: Font Awesome 5 Solid

Request or provide clarification »

Examples

Sass
a.element {@include iconpeek("f054");}
HTML
<a class="nebula-peek" href="#">This is an example link</a>

Additional Notes

For default icon, you can simply use the class nebula-peek or nebula-iconpeek.

Source File

Located in /assets/scss/partials/_mixins.scss on line 273.

Sass
@mixin iconpeek($icon: "\f061", $style: "Font Awesome 5 Solid"){
    display: inline-block; position: relative; overflow: hidden; transition: padding 0.4s easing(easeOutBack);
    &:before {content: $icon; font-family: $style; display: none;}
    svg {position: absolute; left: -25px; height: 100%; transition: left 0.4s easing(easeOutBack);}

    &:hover {padding-left: 25px;
        svg {left: 0;}
    }
}

Override

To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

Sass
@mixin iconpeek($icon, $style){
    //Write your own code here, leave it blank, or return false.
}