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: -7%;
    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: (
    default:         \e018,
    add:             \e032,
    app:             \e00b,
    appearance:      \e021,
    archive:         \e01f,
    atom:            \e601,
    calendar:        \e01e,
    camera:          \e036,
    check:           \e033,
    chevron-down:    \e001,
    chevron-left:    \e11d,
    chevron:         \e01d,
    clock:           \e028,
    close:           \e01c,
    code:            \e03e,
    comments:        \e01b,
    compass:         \e602,
    content:         \e02d,
    edit:            \e00f,
    error:           \e01a,
    external:        \e019,
    featured:        \e026,
    fullscreen:      \e017,
    ghost-logo:      \e600,
    ghost:           \e000,
    grid:            \e016,
    home:            \e015,
    image:           \e011,
    info:            \e014,
    lightning:       \e03d,
    link:            \e035,
    list:            \e013,
    lock:            \e02c,
    mail:            \e012,
    menu:            \e005,
    mobile:          \e010,
    notification:    \e031,
    pacman:          \e00e,
    pc:              \e00d,
    pin:             \e00c,
    power:           \e02b,
    preview:         \e00a,
    question:        \e018,
    reply:           \e024,
    repost:          \e037,
    rss:             \e009,
    search-left:     \e008,
    search:          \e007,
    services:        \e020,
    settings:        \e006,
    settings2:       \e029,
    stats:           \e025,
    success:         \e030,
    support:         \e02f,
    tablet:          \e004,
    tag:             \e003,
    trash:           \e023,
    unfeatured:      \e027,
    user:            \e02e,
    users:           \e002,
    video:           \e022,
    weather-cloudy:  \e03c,
    weather-partial: \e03a,
    weather-rain:    \e038,
    weather-snow:    \e03b,
    weather-sun:     \e039,
    x:               \e034
);


//
// 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}';
    }
}


//
// 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);
}