Created
December 24, 2013 03:12
-
-
Save yisibl/8108317 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| <!doctype html> | |
| <html lang="zh-cn"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>使用 SCSS 调用 iconfont</title> | |
| <style> | |
| body{ | |
| text-align:center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>使用 SCSS 调用 iconfont</h1> | |
| <div class="travel">告别空标签</div> | |
| <div class="music">告别空标签</div> | |
| <p>空标签好伤心~~~(>_<)~~~</p> | |
| <div class="iconfont"></div> | |
| </body> | |
| </html> |
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
| // ---- | |
| // Sass (v3.3.0.rc.1) | |
| // Compass (v0.13.alpha.10) | |
| // ---- | |
| // iconfont 配置 | |
| // @file: _config.scss | |
| // @author: 一丝 | |
| // @update: 2013-12-20 17:39:51 | |
| // 调用 class 的前缀 | |
| $icon-class-prefix: icon- !default; | |
| //给 iconfont 取一个字体名称 | |
| $icon-name: uxiconfont !default; | |
| //iconfont 字体地址 | |
| $icon-src: "http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont" !default; | |
| // @file: _data.scss | |
| // @author: 一丝 | |
| // @update: 2013-12-10 17:41:06; | |
| //定义icon数据列表 | |
| $icon-list: | |
| "music" "\0034", | |
| "travel" "\F043"; | |
| //...更多数据 | |
| //* iconfont 相关 mixin | |
| //* @file: _mixin.scss | |
| /** | |
| *@ name: iconfont.css V1.0.0 | |
| *@ author: 一丝(yisibl) | |
| *@ update: 2013-12-20 14:30:55 | |
| * 1. 防止读屏器读出无意义的图标 | |
| * 2. 防止 OS X 中图标视觉变粗和细节丢失的问题 | |
| * 3. Fiefox 25 开始支持「-moz-osx-font-smoothing:auto(默认)|grayscale」 | |
| * Demo: http://jsbin.com/iWItiQe/2 | |
| */ | |
| // 定义iconfont的默认样式 | |
| %icon-base-styles { | |
| font: { | |
| family: "#{$icon-name}"; | |
| size: 16px; | |
| style: normal; | |
| weight: normal; | |
| variant: normal; | |
| } | |
| line-height: 1; | |
| display: inline-block; | |
| /* 1 */speak: none; | |
| /* 2 */-webkit-font-smoothing: antialiased; | |
| /* 3 */-moz-osx-font-smoothing: grayscale; | |
| } | |
| /** | |
| * 引入 Web font | |
| * 注意：使用font-face需要 CSS 线上地址和引用的 font 线上地址同域，否则 IE9 会有 CSS3117 问题 | |
| * CSS3117: @font-face failed cross-origin request. Resource access is restricted. | |
| */ | |
| // 用法 | |
| // 默认： @include font-face(); | |
| // 自定义： @include font-face("字体路径"); | |
| // 路径结尾不加「/」 | |
| @mixin font-face($font-src: $icon-src) { | |
| @font-face { | |
| font: { | |
| family: "#{$icon-name}"; | |
| weight: normal; | |
| style: normal; | |
| } | |
| src: url("#{$font-src}.eot");///* IE9 */ | |
| src: | |
| url("#{$font-src}.eot?#iefix") format("embedded-opentype"), // /* IE6-IE8 */ | |
| url("#{$font-src}.woff") format("woff"), // /* Chrome、Firefox */ | |
| url("#{$font-src}.ttf") format("truetype"), // /* Chrome、Firefox、Opera、Safari, Android, iOS 4.2+ */ | |
| url("#{$font-src}.svg##{$icon-name}") format("svg"); // /* iOS 4.1- */ | |
| } | |
| } | |
| // 调用字体 mixin | |
| @function match($haystack, $needle) { | |
| @each $item in $haystack { | |
| $index: index($item, $needle); | |
| @if $index { | |
| $return: if($index == 1, 2, $index); | |
| @return nth($item, $return); | |
| } | |
| } | |
| @return false; | |
| } | |
| // 默认： @include icon(); | |
| // 自定义： @include icon("字体路径"); | |
| // 路径结尾不加「/」 | |
| @mixin icon($icon: false, $styles: ture) { | |
| @if $icon { | |
| &:before{ | |
| content: match($icon-list, $icon); | |
| } | |
| } | |
| @if $styles { | |
| @extend %icon-base-styles; | |
| } | |
| @content; // 追加新的样式规则 | |
| } | |
| //是否输出全部iconfont编码 | |
| // 默认不输出 | |
| // 输出: @include get-icon(true); | |
| @mixin get-icon($all-icons: false) { | |
| @if $all-icons { | |
| @each $icon in $icon-list { | |
| $name: nth($icon, 1); | |
| .#{$icon-class-prefix}#{$name} { | |
| @include icon($name,false); | |
| } | |
| } | |
| } | |
| } | |
| //========================================================================== | |
| //开始使用 iconfont | |
| // ========================================================================== | |
| // 一、使用伪元素生成调用方法 | |
| // ========================================================================== | |
| // 1. @include font-face(); | |
| // 或者：@include font-face(字体地址); | |
| @include font-face(); | |
| // 2. 为所有icon前缀开头的class引入字体 | |
| [class^="#{$icon-class-prefix}"], | |
| [class*=" #{$icon-class-prefix}"], | |
| .iconfont { | |
| @include icon; | |
| } | |
| // 3. 调用指定的图标 | |
| // @include icon("字体名称"); | |
| // 可以追加样式 | |
| // ---------------------------- | |
| // 只有调用一个图标时，才会生成对应的 content 样式 | |
| .travel{ | |
| @include icon(travel); | |
| font-size: 30px; | |
| } | |
| .music{ | |
| @include icon(music); | |
| color:blue; | |
| font-size:32px; | |
| } | |
| .music:hover{ | |
| color:green; | |
| } | |
| // ---------------------------- | |
| // 4. 或者是否生成全部图标 | |
| // @include get-icon(true); | |
| //@include get-icon(true); | |
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
| @charset "UTF-8"; | |
| /** | |
| *@ name: iconfont.css V1.0.0 | |
| *@ author: 一丝(yisibl) | |
| *@ update: 2013-12-20 14:30:55 | |
| * 1. 防止读屏器读出无意义的图标 | |
| * 2. 防止 OS X 中图标视觉变粗和细节丢失的问题 | |
| * 3. Fiefox 25 开始支持「-moz-osx-font-smoothing:auto(默认)|grayscale」 | |
| * Demo: http://jsbin.com/iWItiQe/2 | |
| */ | |
| [class^="icon-"], | |
| [class*=" icon-"], | |
| .iconfont, .travel, .music { | |
| font-family: "uxiconfont"; | |
| font-size: 16px; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| line-height: 1; | |
| display: inline-block; | |
| /* 1 */ | |
| speak: none; | |
| /* 2 */ | |
| -webkit-font-smoothing: antialiased; | |
| /* 3 */ | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /** | |
| * 引入 Web font | |
| * 注意：使用font-face需要 CSS 线上地址和引用的 font 线上地址同域，否则 IE9 会有 CSS3117 问题 | |
| * CSS3117: @font-face failed cross-origin request. Resource access is restricted. | |
| */ | |
| @font-face { | |
| font-family: "uxiconfont"; | |
| font-weight: normal; | |
| font-style: normal; | |
| src: url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.eot"); | |
| src: url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.eot?#iefix") format("embedded-opentype"), url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.woff") format("woff"), url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.ttf") format("truetype"), url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.svg#uxiconfont") format("svg"); | |
| } | |
| .travel { | |
| font-size: 30px; | |
| } | |
| .travel:before { | |
| content: "\F043"; | |
| } | |
| .music { | |
| color: blue; | |
| font-size: 32px; | |
| } | |
| .music:before { | |
| content: "\0034"; | |
| } | |
| .music:hover { | |
| color: green; | |
| } |
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
| <!doctype html> | |
| <html lang="zh-cn"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>使用 SCSS 调用 iconfont</title> | |
| <style> | |
| body{ | |
| text-align:center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>使用 SCSS 调用 iconfont</h1> | |
| <div class="travel">告别空标签</div> | |
| <div class="music">告别空标签</div> | |
| <p>空标签好伤心~~~(>_<)~~~</p> | |
| <div class="iconfont"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment