Skip to content

Instantly share code, notes, and snippets.

@maxbates
Created November 13, 2014 00:18
Show Gist options
  • Save maxbates/e7c9c376933737329a69 to your computer and use it in GitHub Desktop.
Save maxbates/e7c9c376933737329a69 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
$font-path: '../fonts/';
$sprite-path: '../sprites/';
$image-path : '../images/';
@function url-wrap ($root : false, $path : false, $only-path : false, $cachebust : false) {
@if not $root or not $path {
@return null; //will result in nothing set
}
$url : '' + $root + $path;
@if ($cachebust) {
$url : $url + '?=' + random(100000);
}
@if not $only-path {
$url : unquote('url("' + $url + '")');
}
@return $url;
}
//these inherit from url-wrap, use same arguments
@function font-url ($params...) { @return url-wrap($font-path, $params...) }
@function image-url ($params...) { @return url-wrap($image-path, $params...) }
@function sprite-url ($params...) { @return url-wrap($sprite-path, $params...) }
// Taken from Compass - https://github.com/Compass/compass
// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
//
// * $name is required, arbitrary, and what you will use in font stacks.
// * $font-files is required using font-files('relative/location', 'format').
// for best results use this order: woff, opentype/truetype, svg
// * $eot is required by IE, and is a relative location of the eot file.
// * $weight shows if the font is bold, defaults to normal
// * $style defaults to normal, might be also italic
// * For android 2.2 Compatiblity, please ensure that your web page has
// a meta viewport tag.
// * To support iOS < 4.2, an SVG file must be provided
//
// If you need to generate other formats check out the Font Squirrel
// [font generator](http://www.fontsquirrel.com/fontface/generator)
//
// In order to refer to a specific style of the font in your stylesheets as
// e.g. "font-style: italic;", you may add a couple of @font-face includes
// containing the respective font files for each style and specying
// respective the $style parameter.
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
@mixin font-face($name, $font-files, $eot: false, $weight: false, $style: false) {
$iefont: unquote("#{$eot}?#iefix");
@font-face {
font-family: quote($name);
@if $eot {
src: font-url($eot);
$font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
}
src: $font-files;
@if $weight {
font-weight: $weight;
}
@if $style {
font-style: $style;
}
}
}
@include font-face("FontAwesome",
font-files("fontawesome-webfont.eot",
"fontawesome-webfont.woff",
"fontawesome-webfont.ttf",
"fontawesome-webfont.svg#FontAwesome"),
$eot: "fontawesome-webfont.eot",
$weight: normal,
$style: normal);
@font-face {
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot");
src: url("../fonts/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url('/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff') format('woff'), url('/fonts/fontawesome-webfont.ttf') format('truetype'), url('/fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment