Last active
July 6, 2017 17:04
-
-
Save davidtheclark/6005027 to your computer and use it in GitHub Desktop.
A template for grunt-webfont that outputs a SCSS "icon" mixin. Also, adds a rule to hide text within a `<span>` inside the designated icon element -- for text describing the icon. (You know: accessibility, SEO, etc.) Below, `output.scss` is some example output, `scss-mixin-icon-template.css` is the template.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family:"icon"; | |
| src:url("../fonts/icon.eot"); | |
| src:url("../fonts/icon.eot?#iefix") format("embedded-opentype"), | |
| url("../fonts/icon.woff") format("woff"), | |
| url("../fonts/icon.ttf") format("truetype"), | |
| url("../fonts/icon.svg?#webfont") format("svg"); | |
| font-weight:normal; | |
| font-style:normal; | |
| } | |
| %icon-base { | |
| &:before { | |
| font-family: "icon"; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| b { | |
| // hide text | |
| height: 0; | |
| display: block; | |
| text-indent: 100%; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| } | |
| @mixin icon($icon) { | |
| @extend %icon-base; | |
| @if ($icon == "twitter") { | |
| &:before { | |
| content:"\f100"; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family:"<%= fontBaseName %>";<% if (eot) { %> | |
| src:<%= fontSrc1 %>;<% }%> | |
| src:<%= fontSrc2 %>; | |
| font-weight:normal; | |
| font-style:normal; | |
| } | |
| %icon-base { | |
| &:before { | |
| font-family: "<%= fontBaseName %>"; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| b { | |
| // hide text | |
| height: 0; | |
| display: block; | |
| text-indent: 100%; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| } | |
| @mixin <%= fontBaseName %>($icon) { | |
| @extend %icon-base; | |
| <% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { %><% if (glyphIdx === 0) { %>@if<% } else { %>@else if<% } %> ($icon == "<%= glyphs[glyphIdx] %>") { | |
| &:before { | |
| content:"\<%= (61696+glyphIdx).toString(16) %>"; | |
| } | |
| } | |
| <% } %> | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
eot is not defined