ghost/core/client/assets/sass/modules/icons.scss

// ------------------------------------------------------------
// Icons
//
// Defined the @font-face rule for the icon font, as well as
// the base styles for when using icons.
// Includes the mixins for adding icons directly and the
// variables for each icon.
//
// * Font-face rule
// * Base styled for icons
// * Base styled for icons
// * The Icon (before) Mixin
// * The Icon (after) Mixin
// * Icon Variables
// * Icon Getter Function
// * Icon Class Styles
// * Icon Classes
// * Div-based Icon Classes
// ------------------------------------------------------------


//
// Font-face rule
// Icon-font is generated by http://icomoon.co
// Pictos, by Drew Wilson - http://pictos.cc/
// --------------------------------------------------

@font-face {
    font-family: 'GhostIcons';
    src:url('../fonts/icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


//
// Base styled for icons
// --------------------------------------------------

%icon-base {
    font-family: "GhostIcons";
    font-weight: normal;
    font-style: normal;
    vertical-align: -3%;
    text-transform:none;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


//
// The Icon (before) Mixin
// --------------------------------------------------

@mixin icon($char, $size: '', $color: '') {
    &:before {
        @extend %icon-base;

        content: iconvar($char, 'string');
        @if $size != '' {
            font-size: $size;
        }
        @if $color != '' {
            color: $color;
        }
        @content;
    }

    &:hover {
        text-decoration:none;
    }
}

//
// The Icon (after) Mixin
// --------------------------------------------------

@mixin icon-after($char, $size: '', $color: '') {
    &:after {
        @extend %icon-base;

        content: iconvar($char, 'string');
        @if $size != '' {
            font-size: $size;
        }
        @if $color != '' {
            color: $color;
        }
        @content;
    }

    &:hover {
        text-decoration:none;
    }
}


//
// Icon Variables
// --------------------------------------------------
// For accessibility, icon characters in the icon font are stored in Unicode's
// Private Use Area characters. This means that screen readers won't attempt to
// read them out loud.
//

$icons: (
    add:             \f632,
    app:             \f60b,
    appearance:      \f621,
    archive:         \f61f,
    atom:            \f63e,
    book:            \f642,
    calendar:        \f61e,
    camera:          \f62a,
    check:           \f633,
    chevron-down:    \f601,
    chevron-left:    \f643,
    chevron:         \f61d,
    clock:           \f628,
    close:           \f61c,
    code:            \f63d,
    comments:        \f61b,
    compass:         \f63f,
    content:         \f62d,
    edit:            \f60f,
    error:           \f61a,
    external:        \f619,
    featured:        \f626,
    fullscreen:      \f617,
    ghost-logo:      \f644,
    ghost:           \f600,
    grid:            \f616,
    home:            \f615,
    image:           \f611,
    info:            \f614,
    lightning:       \f63c,
    link:            \f635,
    list:            \f613,
    lock:            \f62c,
    mail:            \f612,
    markdown:        \f640,
    menu:            \f605,
    mobile:          \f610,
    notification:    \f631,
    pacman:          \f60e,
    pc:              \f60d,
    pin:             \f60c,
    power:           \f62b,
    preview:         \f60a,
    question:        \f618,
    reply:           \f624,
    repost:          \f636,
    rss:             \f609,
    search-left:     \f608,
    search:          \f607,
    services:        \f620,
    settings:        \f606,
    settings2:       \f629,
    stats:           \f625,
    success:         \f630,
    support:         \f62f,
    tablet:          \f604,
    tag:             \f603,
    trash:           \f623,
    twitter:         \f641,
    unfeatured:      \f627,
    user:            \f62e,
    users:           \f602,
    video:           \f622,
    weather-cloudy:  \f63b,
    weather-partial: \f639,
    weather-rain:    \f637,
    weather-snow:    \f63a,
    weather-sun:     \f638,
    x:               \f634
);


//
// Icon Getter Function
// --------------------------------------------------
// Take the icon name, find it in the $icons map and
// either return the unicode itself or as a string
//

@function iconvar($name, $type: 'value'){
    $unicode: map-get($icons, $name);
    @if ($type == 'string') {
        $icon: '#{$unicode}';
    } @else {
        $icon: $unicode;
    }
    @return $icon;
}


//
// Icon Class Styles
// --------------------------------------------------

[class*=icon-] {
    &:before {
        @extend %icon-base;
    }

    &:hover {
        text-decoration: none;
    }
}


//
// Icon Classes
// --------------------------------------------------

@each $key, $content in $icons {
    .icon-#{$key}:before {
        content: '#{$content}';
    }
}

// Specific icon size adjustments
.icon-list:before {
    font-size: 0.9em;
}
.icon-markdown:before {
    font-size: 1.1em;
    vertical-align: -7%;
}
.icon-twitter:before {
    font-size: 1.1em;
}


//
// Div-based Icon Classes
// --------------------------------------------------

.icon-grab:before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 15px;
    background-size: 4px 4px;
    background-color: $midbrown;
    background-position: -1px -1px;
    background-image: linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px),
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
}