Skip to content

Instantly share code, notes, and snippets.

@jgatjens
Last active August 29, 2015 14:25
Show Gist options
  • Save jgatjens/02957c78296b9aed5fa1 to your computer and use it in GitHub Desktop.
Save jgatjens/02957c78296b9aed5fa1 to your computer and use it in GitHub Desktop.
Decimal to hexadecimal - font icon map loop
// ----
// libsass (v3.2.5)
// ----
@function dec-to-hex($d) {
$hexVals: "A" "B" "C" "D" "E" "F";
$base: 16;
$quotient: $d;
$result: "";
@if $d == 0 {
$result: "00";
}
@while $quotient != 0 {
$mod: $quotient % $base;
$quotient: floor($quotient / $base);
@if $mod > 9 {
$mod: nth($hexVals, $mod - 9);
}
@if $d < $base {
$result: "0" + $mod;
} @else {
$result: $mod + $result;
}
}
@return #{"\"\\"}#{$result + "\""};
}
// Variables
$icon-css-prefix: 'icon';
.#{$icon-css-prefix} {
display: inline-block;
font: normal normal normal 16px/1 'untitledregular'; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
$icons: (
facebook: 5824,
twitter: 58246,
youtube: 58247,
instagram: 5824,
google: 5825,
pinterest: 5824,
subscription: 57664,
internet: 57926,
social: 57924,
list: 58136,
heart: 57608,
video-play: 58144,
profile: 57601,
mikey: 57408,
stories: 57479
);
@each $iconName, $icon in $icons {
.#{$icon-css-prefix}-#{$iconName}:before {
content: dec-to-hex($icon);
}
}
.icon {
display: inline-block;
font: normal normal normal 16px/1 "untitledregular";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-facebook:before {
content: "\16C0";
}
.icon-twitter:before {
content: "\E386";
}
.icon-youtube:before {
content: "\E387";
}
.icon-instagram:before {
content: "\16C0";
}
.icon-google:before {
content: "\16C1";
}
.icon-pinterest:before {
content: "\16C0";
}
.icon-subscription:before {
content: "\E140";
}
.icon-internet:before {
content: "\E246";
}
.icon-social:before {
content: "\E244";
}
.icon-list:before {
content: "\E318";
}
.icon-heart:before {
content: "\E108";
}
.icon-video-play:before {
content: "\E320";
}
.icon-profile:before {
content: "\E101";
}
.icon-mikey:before {
content: "\E040";
}
.icon-stories:before {
content: "\E087";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment