Sha256: cfcd962baa3cea45bb8de93f91cf820ef654d033bc6f6a681b175e0d47ad4393
Contents?: true
Size: 1.58 KB
Versions: 15
Compression:
Stored size: 1.58 KB
Contents
/******************************************************************************/
// _icons.scss
//
// DESCRIPTION: Loads the icon font, generates icon classes, and creates an
// icon() mixin to be used within CSS.
//
// Configuration for this file is in config/_icons.scss
@include font-face($icon-name, "#{$icon-path}#{$icon-name}", $asset-pipeline: true);
%icon-font-#{$icon-name} {
font-family: $icon-name;
speak: none;
font-variant: normal;
font-style: normal;
font-weight: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
$icon-prefix: '' !default;
@if $icon-prefix { $icon-prefix: "-#{$icon-prefix}"; }
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
@extend %icon-font-#{$icon-name};
content: attr(data-icon);
}
.button > [class*="icon-"] { margin-right: rem-calc(5); }
[class*="icon#{$icon-prefix}-"] {
@extend %icon-font-#{$icon-name};
background: none;
&:active { text-decoration: none; }
}
@each $icon in $icons {
.icon#{$icon-prefix}-#{nth($icon, 1)}:before { content: '#{nth($icon, 2)}' }
}
// Helpers
@mixin icon($icon) {
$char-code: get-list-value($icons, $icon);
@extend %icon-font-#{$icon-name};
content: "#{$char-code}";
}
// Adds the specified icon to the specified pseudo class
@mixin inline-icon($icon-name: '', $color: inherit, $pseudo: before, $font-size: false, $margin: 0, $padding: 0) {
&:#{$pseudo} {
@include icon($icon-name);
@if $font-size { font-size: $font-size; }
color: $color;
margin: $margin;
padding: $padding;
}
}
Version data entries
15 entries across 15 versions & 1 rubygems