Skip to Content
Menu

iconpeek()

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

Sass May 7, 2022

Usage

Sass
iconpeek($icon)

Parameters

This function does not accept any parameters. Is this incorrect?

Examples

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

Additional Notes

You can simply use the class nebula-peek or nebula-iconpeek without needing to write any CSS.

Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

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

    Sass
    @mixin iconpeek(){
        display: inline-block; position: relative; overflow: hidden; transform: translate3d(-20px, 0, 0); transition: transform 0.4s easing(easeOutBack) !important; will-change: transform;
        svg, i {transform: translate3d(-20px, 0, 0); transition: transform 0.4s easing(easeOutBack); will-change: transform;}
    
        &:hover {transform: translate3d(0, 0, 0);
            svg, i {transform: translate3d(0, 0, 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(){
        //Write your own code here, leave it blank, or return false.
    }