Skip to content

Instantly share code, notes, and snippets.

@ntassone
Created March 8, 2014 22:46
Show Gist options
  • Save ntassone/9440174 to your computer and use it in GitHub Desktop.
Save ntassone/9440174 to your computer and use it in GitHub Desktop.
Entypo SCSS file
$icon_font: 'EntypoRegular';
$icon_prefix: dicon;
$icon_color: inherit;
$icon_color_hover: inherit;
@font-face {
font-family: $icon_font;
src: url('../fonts/entypo/entypo.eot');
src: url('../fonts/entypo/entypo.eot#iefix') format('embedded-opentype'),
url('../fonts/entypo/entypo.woff') format('woff'),
url('../fonts/entypo/entypo.ttf') format('truetype'),
url('../fonts/entypo/entypo.svg#EntypoRegular') format('svg');
font-style: normal;
font-weight: normal;
}
@mixin entypo-icon {
position: relative;
display: inline-block;
font-family: $font-icon;
font-size: 2em;
font-style: normal;
font-weight: normal;
line-height: 0;
color: $icon_color;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="#{$icon-prefix}"],
[class*=" #{$icon-prefix}"] {
@include entypo-icon;
//Give a class of [icon-prefix]-hover to linkify a non-anchor
&.#{$icon-prefix}-hover:hover {
color: $icon_color_hover;
}
}
a[class^="#{$icon-prefix}"] {
color: $icon_color;
&:hover {
color: $icon_color_hover;
}
}
//Icon definitions
$icons: (phone \1F4DE,
mobile \1F4F1,
mouse \E789,
address \E723,
mail \2709,
paper-plane \1F53F,
pencil \270E,
feather \2712,
attach \1F4CE,
inbox \E777,
reply \E712,
reply-all \E713,
forward \27A6,
user \1F464,
users \1F465,
add-user \E700,
vcard \E722,
export \E715,
location \E724,
map \E727,
compass \E728,
direction \27A2,
hair-cross \1F3AF,
share \E73C,
shareable \E73E,
heart \2665,
heart-empty \2661,
star \2605,
star-empty \2606,
thumbs-up \1F44D,
thumbs-down \1F44E,
chat \E720,
comment \E718,
quote \275E,
home \2302,
popup \E74C,
search \1F50D,
flashlight \1F526,
print \E716,
bell \1F514,
link \1F517,
flag \2691,
cog \2699,
tools \2692,
trophy \1F3C6,
tag \E70C,
camera \1F4F7,
megaphone \1F4E3,
moon \263D,
palette \1F3A8,
leaf \1F342,
note \266A,
beamed-note \266B,
new \1F4A5,
graduation-cap \1F393,
book \1F4D5,
newspaper \1F4F0,
bag \1F45C,
airplane \2708,
lifebuoy \E788,
eye \E70A,
clock \1F554,
mic \1F3A4,
calendar \1F4C5,
flash \26A1,
thunder-cloud \26C8,
droplet \1F4A7,
cd \1F4BF,
briefcase \1F4BC,
air \1F4A8,
hourglass \23F3,
gauge \1F6C7,
language \1F394,
network \E776,
key \1F511,
battery \1F50B,
bucket \1F4FE,
magnet \E7A1,
drive \1F4FD,
cup \2615,
rocket \1F680,
brush \E79A,
suitcase \1F6C6,
traffic-cone \1F6C8,
globe \1F30E,
keyboard \2328,
browser \E74E,
publish \E74D,
progress-3 \E76B,
progress-2 \E76A,
progress-1 \E769,
progress-0 \E768,
light-down \1F505,
light-up \1F506,
adjust \25D1,
code \E714,
monitor \1F4BB,
infinity \221E,
light-bulb \1F4A1,
credit-card \1F4B3,
database \1F4F8,
voicemail \2707,
clipboard \1F4CB,
cart \E73D,
box \1F4E6,
ticket \1F3AB,
rss \E73A,
signal \1F4F6,
thermometer \1F4FF,
water \1F4A6,
sweden \F601,
line-graph \1F4C8,
pie-chart \25F4,
bar-graph \1F4CA,
area-graph \1F53E,
lock \1F512,
lock-open \1F513,
logout \E741,
login \E740,
check \2713,
cross \274C,
squared-minus \229F,
squared-plus \229E,
squared-cross \274E,
circled-minus \2296,
circled-plus \2295,
circled-cross \2716,
minus \2796,
plus \2795,
erase \232B,
block \1F6AB,
info \2139,
circled-info \E705,
help \2753,
circled-help \E704,
warning \26A0,
cycle \1F504,
cw \27F3,
ccw \27F2,
shuffle \1F500,
back \1F519,
level-down \21B3,
retweet \E717,
loop \1F501,
back-in-time \E771,
level-up \21B0,
switch \21C6,
numbered-list \E005,
add-to-list \E003,
layout \268F,
list \2630,
text-doc \1F4C4,
text-doc-inverted \E731,
doc \E730,
docs \E736,
landscape-doc \E737,
picture \1F304,
video \1F3AC,
music \1F3B5,
folder \1F4C1,
archive \E800,
trash \E729,
upload \1F4E4,
download \1F4E5,
save \1F4BE,
install \E778,
cloud \2601,
upload-cloud \E711,
bookmark \1F516,
bookmarks \1F4D1,
open-book \1F4D6,
play \25B6,
paus \2016,
record \25CF,
stop \25A0,
ff \23E9,
fb \23EA,
to-start \23EE,
to-end \23ED,
resize-full \E744,
resize-small \E746,
volume \23F7,
sound \1F50A,
mute \1F507,
flow-cascade \1F568,
flow-branch \1F569,
flow-tree \1F56A,
flow-line \1F56B,
flow-parallel \1F56C,
left-bold \E4AD,
down-bold \E4B0,
up-bold \E4AF,
right-bold \E4AE,
left \2B05,
down \2B07,
up \2B06,
right \27A1,
circled-left \E759,
circled-down \E758,
circled-up \E75B,
circled-right \E75A,
triangle-left \25C2,
triangle-down \25BE,
triangle-up \25B4,
triangle-right \25B8,
chevron-left \E75D,
chevron-down \E75C,
chevron-up \E75F,
chevron-right \E75E,
chevron-small-left \E761,
chevron-small-down \E760,
chevron-small-up \E763,
chevron-small-right \E762,
chevron-thin-left \E765,
chevron-thin-down \E764,
chevron-thin-up \E767,
chevron-thin-right \E766,
left-thin \2190,
down-thin \2193,
up-thin \2191,
right-thin \2192,
arrow-combo \E74F,
three-dots \23F6,
two-dots \23F5,
dot \23F4,
cc \1F545,
cc-by \1F546,
cc-nc \1F547,
cc-nc-eu \1F548,
cc-nc-jp \1F549,
cc-sa \1F54A,
cc-nd \1F54B,
cc-pd \1F54C,
cc-zero \1F54D,
cc-share \1F54E,
cc-remix \1F54F);
//Icon Definition Loop
@each $icon in $icons {
.#{$icon_prefix}-#{nth($icon, 1)} {
&:before {
content: "#{nth($icon, 2)}";
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment