Skip to content

Instantly share code, notes, and snippets.

@maggo
Last active December 20, 2015 12:28
Show Gist options
  • Save maggo/6130826 to your computer and use it in GitHub Desktop.
Save maggo/6130826 to your computer and use it in GitHub Desktop.
Foundation icon partial.
//
// Icon variables
//
$icon-font-path: '/font/icons/' !default;
$icon-font-name: 'entypo' !default;
$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"),
(db-logo, "\1F5F9"),
(db-shape, "\1F5FA")
) !default;
@font-face {
font-family: $icon-font-name;
src: url($icon-font-path + $icon-font-name + '.eot');
src: url($icon-font-path + $icon-font-name + '.eot?#iefix') format('embedded-opentype'),
url($icon-font-path + $icon-font-name + '.woff') format('woff'),
url($icon-font-path + $icon-font-name + '.ttf') format('truetype'),
url($icon-font-path + $icon-font-name + '.svg#' + $icon-font-name) format('svg');
font-weight: normal;
font-style: normal;
}
//
// Icon mixin
//
@mixin icon-pseudo($char, $size: 2em) {
font-size: $size;
content: $char;
line-height: if(unit($size) == 'em', 0.5em, $size / 2);
vertical-align: middle;
}
@mixin icon($char: "", $size: 2em, $flat: false) {
font-family: $icon-font-name;
font-style: normal;
font-weight: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
speak: none;
@if $flat {
@include icon-pseudo($char, $size);
} @else {
&:before {
@include icon-pseudo($char, $size);
}
}
}
[data-icon]:before {
@include icon(attr(data-icon));
}
@each $icon in $icons {
.icon-#{nth($icon, 1)} {
@include icon(nth($icon, 2));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment