Fix icon font render

MoOx · Sep 17, 2012 · 1a6d604 · 1a6d604
1 parent 2d89568
commit 1a6d604
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 4 deletions.
diff --git a/stylesheets/recipes/_icon-font.scss b/stylesheets/recipes/_icon-font.scss
@@ -71,7 +71,6 @@ $icon-font-stroke: null !default;
 	position: relative;
 	display: inline-block;
 	overflow: visible;
-	@include background-clip(text);
 }
 
 // Common base style for pseudo-selectors
@@ -219,6 +218,11 @@ $icon-font-stroke: null !default;
 		font-size: $size;
 	}
 
+	// Since :after is using text-fill-color: transparent, :before is only used for the shadow;
+	&:before {
+		color: transparent;
+	}
+
 	@include icon-font-effect($color, $gradient-type, $shadow, $stroke);
 
 	@if $include-states {

diff --git a/tests/recipes/icon-font/s.css b/tests/recipes/icon-font/s.css
@@ -2,9 +2,6 @@
   position: relative;
   display: inline-block;
   overflow: visible;
-  -webkit-background-clip: text;
-  -moz-background-clip: text;
-  background-clip: text;
 }
 
 .smiley:before, .smiley:after, .broccolidry:before, .broccolidry:after, .cuticons:before, .cuticons:after, .ecoico:before, .ecoico:after, .entypo:before, .entypo:after, .fontawesome:before, .fontawesome:after, .heydings_icons:before, .heydings_icons:after, .heydings_controls:before, .heydings_controls:after, .icomoon:before, .icomoon:after, .iconic_fill:before, .iconic_fill:after, .iconic_stroke:before, .iconic_stroke:after, .iconminia:before, .iconminia:after, .meteocons:before, .meteocons:after, .modern_pictograms:before, .modern_pictograms:after, .silkcons:before, .silkcons:after, .socialico:before, .socialico:after, .typicons:before, .typicons:after, .websymbols:before, .websymbols:after, .wpzoom:before, .wpzoom:after {
@@ -191,6 +188,9 @@
   content: "\263a";
   font-size: 200px;
 }
+.smiley:before {
+  color: transparent;
+}
 .smiley:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -229,6 +229,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.broccolidry:before {
+  color: transparent;
+}
 .broccolidry:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -267,6 +270,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.cuticons:before {
+  color: transparent;
+}
 .cuticons:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -305,6 +311,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.ecoico:before {
+  color: transparent;
+}
 .ecoico:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -343,6 +352,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.entypo:before {
+  color: transparent;
+}
 .entypo:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -381,6 +393,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.fontawesome:before {
+  color: transparent;
+}
 .fontawesome:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -419,6 +434,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.heydings_icons:before {
+  color: transparent;
+}
 .heydings_icons:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -457,6 +475,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.heydings_controls:before {
+  color: transparent;
+}
 .heydings_controls:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -495,6 +516,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.icomoon:before {
+  color: transparent;
+}
 .icomoon:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -533,6 +557,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.iconic_fill:before {
+  color: transparent;
+}
 .iconic_fill:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -571,6 +598,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.iconic_stroke:before {
+  color: transparent;
+}
 .iconic_stroke:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -609,6 +639,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.iconminia:before {
+  color: transparent;
+}
 .iconminia:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -647,6 +680,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.meteocons:before {
+  color: transparent;
+}
 .meteocons:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -685,6 +721,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.modern_pictograms:before {
+  color: transparent;
+}
 .modern_pictograms:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -723,6 +762,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.silkcons:before {
+  color: transparent;
+}
 .silkcons:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -761,6 +803,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.socialico:before {
+  color: transparent;
+}
 .socialico:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -799,6 +844,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.typicons:before {
+  color: transparent;
+}
 .typicons:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -837,6 +885,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.websymbols:before {
+  color: transparent;
+}
 .websymbols:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }
@@ -875,6 +926,9 @@
   content: attr(data-icon);
   font-size: 1em;
 }
+.wpzoom:before {
+  color: transparent;
+}
 .wpzoom:before {
   text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
 }