Skip to content

Instantly share code, notes, and snippets.

@hatefulcrawdad

hatefulcrawdad/demo.html

Created June 11, 2013 17:19
Show Gist options
  • Save hatefulcrawdad/5758817 to your computer and use it in GitHub Desktop.
Save hatefulcrawdad/5758817 to your computer and use it in GitHub Desktop.
Download ZIP
Running multiple Foundicon fonts with Vanilla CSS
Raw
demo.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Multiple Founicon Fonts</title>
<link rel="stylesheet" href="stylesheets/style.css">
<!--[if lt IE 8]>
<link rel="stylesheet" href="stylesheets/style_ie7.css">
<![endif]-->
</style>
</head>
<body>
<h3>Example of using multiple Foundicon Fonts on the same page:</h3>
<p><i class="foundicon-settings"></i></p>
<p><i class="foundicon-rss social"></i></p>
<p><i class="foundicon-speaker accessibility"></i></p>
</body>
Raw
style-ie7.css
/* general icons for IE7 */
[class*="foundicon-"] { font-family: "GeneralFoundicons"; font-weight: normal; font-style: normal; }
/* social icons for IE7 */
[class*="foundicon- social"] { font-family: "SocialFoundicons"; font-weight: normal; font-style: normal; }
/* accessibility icons for IE7 */
[class*="foundicon- accessibility"] { font-family: "AccessibilityFoundicons"; font-weight: normal; font-style: normal; }
/* General icon classes for IE7 */
.foundicon-settings { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf000;"); }
.foundicon-heart { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf001;"); }
.foundicon-star { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf002;"); }
.foundicon-plus { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf003;"); }
.foundicon-minus { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf004;"); }
.foundicon-checkmark { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf005;"); }
.foundicon-remove { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf006;"); }
.foundicon-mail { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf007;"); }
.foundicon-calendar { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf008;"); }
.foundicon-page { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf009;"); }
.foundicon-tools { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00a;"); }
.foundicon-globe { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00b;"); }
.foundicon-home { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00c;"); }
.foundicon-quote { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00d;"); }
.foundicon-people { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00e;"); }
.foundicon-monitor { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00f;"); }
.foundicon-laptop { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf010;"); }
.foundicon-phone { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf011;"); }
.foundicon-cloud { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf012;"); }
.foundicon-error { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf013;"); }
.foundicon-right-arrow { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf014;"); }
.foundicon-left-arrow { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf015;"); }
.foundicon-up-arrow { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf016;"); }
.foundicon-down-arrow { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf017;"); }
.foundicon-trash { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf018;"); }
.foundicon-add-doc { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf019;"); }
.foundicon-edit { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01a;"); }
.foundicon-lock { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01b;"); }
.foundicon-unlock { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01c;"); }
.foundicon-refresh { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01d;"); }
.foundicon-paper-clip { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01e;"); }
.foundicon-video { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01f;"); }
.foundicon-photo { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf020;"); }
.foundicon-graph { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf021;"); }
.foundicon-idea { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf022;"); }
.foundicon-mic { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf023;"); }
.foundicon-cart { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf024;"); }
.foundicon-address-book { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf025;"); }
.foundicon-compass { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf026;"); }
.foundicon-flag { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf027;"); }
.foundicon-location { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf028;"); }
.foundicon-clock { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf029;"); }
.foundicon-folder { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf02a;"); }
.foundicon-inbox { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf02b;"); }
.foundicon-website { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf02c;"); }
.foundicon-smiley { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf02d;"); }
.foundicon-search { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf02e;"); }
/* Social icon classes for IE7 */
.foundicon-thumb-up { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf000;"); }
.foundicon-thumb-down { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf001;"); }
.foundicon-rss { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf002;"); }
.foundicon-facebook { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf003;"); }
.foundicon-twitter { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf004;"); }
.foundicon-pinterest { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf005;"); }
.foundicon-github { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf006;"); }
.foundicon-path { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf007;"); }
.foundicon-linkedin { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf008;"); }
.foundicon-dribbble { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf009;"); }
.foundicon-stumble-upon { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00a;"); }
.foundicon-behance { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00b;"); }
.foundicon-reddit { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00c;"); }
.foundicon-google-plus { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00d;"); }
.foundicon-youtube { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00e;"); }
.foundicon-vimeo { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00f;"); }
.foundicon-flickr { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf010;"); }
.foundicon-slideshare { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf011;"); }
.foundicon-picassa { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf012;"); }
.foundicon-skype { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf013;"); }
.foundicon-steam { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf014;"); }
.foundicon-instagram { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf015;"); }
.foundicon-foursquare { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf016;"); }
.foundicon-delicious { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf017;"); }
.foundicon-chat { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf018;"); }
.foundicon-torso { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf019;"); }
.foundicon-tumblr { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01a;"); }
.foundicon-video-chat { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01b;"); }
.foundicon-digg { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01c;"); }
.foundicon-wordpress { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf01d;"); }
/* Accessibility icon classes for IE7 */
.foundicon-wheelchair { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf000;"); }
.foundicon-speaker { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf001;"); }
.foundicon-fontsize { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf002;"); }
.foundicon-eject { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf003;"); }
.foundicon-view-mode { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf004;"); }
.foundicon-eyeball { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf005;"); }
.foundicon-asl { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf006;"); }
.foundicon-person { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf007;"); }
.foundicon-question { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf008;"); }
.foundicon-adult { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf009;"); }
.foundicon-child { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00a;"); }
.foundicon-glasses { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00b;"); }
.foundicon-cc { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00c;"); }
.foundicon-blind { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00d;"); }
.foundicon-braille { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00e;"); }
.foundicon-iphone-home { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf00f;"); }
.foundicon-w3c { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf010;"); }
.foundicon-css { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf011;"); }
.foundicon-key { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf012;"); }
.foundicon-hearing-impaired { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf013;"); }
.foundicon-male { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf014;"); }
.foundicon-female { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf015;"); }
.foundicon-network { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf016;"); }
.foundicon-guidedog { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf017;"); }
.foundicon-universal-access { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf018;"); }
.foundicon-elevator { *zoom: expression(this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf019;"); }
Raw
style.css
/* font-face */
@font-face { font-family: "GeneralFoundicons"; src: url("../fonts/general_foundicons.eot"); src: url("../fonts/general_foundicons.eot?#iefix") format("embedded-opentype"), url("../fonts/general_foundicons.woff") format("woff"), url("../fonts/general_foundicons.ttf") format("truetype"), url("../fonts/general_foundicons.svg#GeneralFoundicons") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: "SocialFoundicons"; src: url("../fonts/social_foundicons.eot"); src: url("../fonts/social_foundicons.eot?#iefix") format("embedded-opentype"), url("../fonts/social_foundicons.woff") format("woff"), url("../fonts/social_foundicons.ttf") format("truetype"), url("../fonts/social_foundicons.svg#SocialFoundicons") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: "AccessibilityFoundicons"; src: url("../fonts/accessibility_foundicons.eot"); src: url("../fonts/accessibility_foundicons.eot?#iefix") format("embedded-opentype"), url("../fonts/accessibility_foundicons.woff") format("woff"), url("../fonts/accessibility_foundicons.ttf") format("truetype"), url("../fonts/accessibility_foundicons.svg#AccessibilityFoundicons") format("svg"); font-weight: normal; font-style: normal; }
[class*="foundicon-"] { display: inline; width: auto; height: auto; line-height: inherit; vertical-align: baseline; background-image: none; background-position: 0 0; background-repeat: repeat; }
/* */
/* The multiple magic */
/* */
/* General Icons */
[class*="foundicon-"]:before { font-family: "GeneralFoundicons"; font-weight: normal; font-style: normal; text-decoration: inherit; }
/* Social Icons */
.social[class*="foundicon-"]:before { font-family: "SocialFoundicons"; font-weight: normal; font-style: normal; text-decoration: inherit; }
/* Accessibility Icons */
.accessibility[class*="foundicon-"]:before { font-family: "AccessibilityFoundicons"; font-weight: normal; font-style: normal; text-decoration: inherit; }
/* General icon classes */
.foundicon-settings:before { content: "\f000"; }
.foundicon-heart:before { content: "\f001"; }
.foundicon-star:before { content: "\f002"; }
.foundicon-plus:before { content: "\f003"; }
.foundicon-minus:before { content: "\f004"; }
.foundicon-checkmark:before { content: "\f005"; }
.foundicon-remove:before { content: "\f006"; }
.foundicon-mail:before { content: "\f007"; }
.foundicon-calendar:before { content: "\f008"; }
.foundicon-page:before { content: "\f009"; }
.foundicon-tools:before { content: "\f00a"; }
.foundicon-globe:before { content: "\f00b"; }
.foundicon-home:before { content: "\f00c"; }
.foundicon-quote:before { content: "\f00d"; }
.foundicon-people:before { content: "\f00e"; }
.foundicon-monitor:before { content: "\f00f"; }
.foundicon-laptop:before { content: "\f010"; }
.foundicon-phone:before { content: "\f011"; }
.foundicon-cloud:before { content: "\f012"; }
.foundicon-error:before { content: "\f013"; }
.foundicon-right-arrow:before { content: "\f014"; }
.foundicon-left-arrow:before { content: "\f015"; }
.foundicon-up-arrow:before { content: "\f016"; }
.foundicon-down-arrow:before { content: "\f017"; }
.foundicon-trash:before { content: "\f018"; }
.foundicon-add-doc:before { content: "\f019"; }
.foundicon-edit:before { content: "\f01a"; }
.foundicon-lock:before { content: "\f01b"; }
.foundicon-unlock:before { content: "\f01c"; }
.foundicon-refresh:before { content: "\f01d"; }
.foundicon-paper-clip:before { content: "\f01e"; }
.foundicon-video:before { content: "\f01f"; }
.foundicon-photo:before { content: "\f020"; }
.foundicon-graph:before { content: "\f021"; }
.foundicon-idea:before { content: "\f022"; }
.foundicon-mic:before { content: "\f023"; }
.foundicon-cart:before { content: "\f024"; }
.foundicon-address-book:before { content: "\f025"; }
.foundicon-compass:before { content: "\f026"; }
.foundicon-flag:before { content: "\f027"; }
.foundicon-location:before { content: "\f028"; }
.foundicon-clock:before { content: "\f029"; }
.foundicon-folder:before { content: "\f02a"; }
.foundicon-inbox:before { content: "\f02b"; }
.foundicon-website:before { content: "\f02c"; }
.foundicon-smiley:before { content: "\f02d"; }
.foundicon-search:before { content: "\f02e"; }
/* Social icon classes */
.foundicon-thumb-up:before { content: "\f000"; }
.foundicon-thumb-down:before { content: "\f001"; }
.foundicon-rss:before { content: "\f002"; }
.foundicon-facebook:before { content: "\f003"; }
.foundicon-twitter:before { content: "\f004"; }
.foundicon-pinterest:before { content: "\f005"; }
.foundicon-github:before { content: "\f006"; }
.foundicon-path:before { content: "\f007"; }
.foundicon-linkedin:before { content: "\f008"; }
.foundicon-dribbble:before { content: "\f009"; }
.foundicon-stumble-upon:before { content: "\f00a"; }
.foundicon-behance:before { content: "\f00b"; }
.foundicon-reddit:before { content: "\f00c"; }
.foundicon-google-plus:before { content: "\f00d"; }
.foundicon-youtube:before { content: "\f00e"; }
.foundicon-vimeo:before { content: "\f00f"; }
.foundicon-flickr:before { content: "\f010"; }
.foundicon-slideshare:before { content: "\f011"; }
.foundicon-picassa:before { content: "\f012"; }
.foundicon-skype:before { content: "\f013"; }
.foundicon-steam:before { content: "\f014"; }
.foundicon-instagram:before { content: "\f015"; }
.foundicon-foursquare:before { content: "\f016"; }
.foundicon-delicious:before { content: "\f017"; }
.foundicon-chat:before { content: "\f018"; }
.foundicon-torso:before { content: "\f019"; }
.foundicon-tumblr:before { content: "\f01a"; }
.foundicon-video-chat:before { content: "\f01"; }
.foundicon-digg:before { content: "\f01c"; }
.foundicon-wordpress:before { content: "\f01d"; }
/* Accessibility icon classes */
.foundicon-wheelchair:before { content: "\f000"; }
.foundicon-speaker:before { content: "\f001"; }
.foundicon-fontsize:before { content: "\f002"; }
.foundicon-eject:before { content: "\f003"; }
.foundicon-view-mode:before { content: "\f004"; }
.foundicon-eyeball:before { content: "\f005"; }
.foundicon-asl:before { content: "\f006"; }
.foundicon-person:before { content: "\f007"; }
.foundicon-question:before { content: "\f008"; }
.foundicon-adult:before { content: "\f009"; }
.foundicon-child:before { content: "\f00a"; }
.foundicon-glasses:before { content: "\f00b"; }
.foundicon-cc:before { content: "\f00c"; }
.foundicon-blind:before { content: "\f00d"; }
.foundicon-braille:before { content: "\f00e"; }
.foundicon-iphone-home:before { content: "\f00f"; }
.foundicon-w3c:before { content: "\f010"; }
.foundicon-css:before { content: "\f011"; }
.foundicon-key:before { content: "\f012"; }
.foundicon-hearing-impaired:before { content: "\f013"; }
.foundicon-male:before { content: "\f014"; }
.foundicon-female:before { content: "\f015"; }
.foundicon-network:before { content: "\f016"; }
.foundicon-guidedog:before { content: "\f017"; }
.foundicon-universal-access:before { content: "\f018"; }
.foundicon-elevator:before { content: "\f019"; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment