Skip to content

Instantly share code, notes, and snippets.

@yisibl
Created December 24, 2013 03:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yisibl/8108317 to your computer and use it in GitHub Desktop.
Save yisibl/8108317 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<!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">&#61505;</div>
</body>
</html>
// ----
// 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);
@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;
}
<!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">&#61505;</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment