From 77dfb436b4ca2b12098d672b42cdd946ce8102b5 Mon Sep 17 00:00:00 2001 From: Maxime Fabre Date: Thu, 8 Mar 2012 01:03:10 +0100 Subject: [PATCH] Added SASS and SCSS versions --- sass/font-awesome.sass | 472 +++++++++++++++++++++++++++++++++++++++++ sass/font-awesome.scss | 220 +++++++++++++++++++ 2 files changed, 692 insertions(+) create mode 100644 sass/font-awesome.sass create mode 100644 sass/font-awesome.scss diff --git a/sass/font-awesome.sass b/sass/font-awesome.sass new file mode 100644 index 000000000..0dc98884a --- /dev/null +++ b/sass/font-awesome.sass @@ -0,0 +1,472 @@ +@import compass/css3/font-face + +$font_path: "../font/fontawesome-webfont" !default + ++font-face("FontAwesome", font-files("#{$font_path}.woff", woff, "#{$font_path}.ttf", truetype, "#{$font_path}.otf", opentype, "#{$font_path}.svgz#FontAwesomeRegular", svg, "#{$font_path}.svg#FontAwesomeRegular", svg), "#{$font_path}.eot", normal, normal) + +// ICONS +// Glyphs and icons for buttons, nav, and more +// ------------------------------------------- +// Font Awesome courtesy of Dave Gandy at fortaweso.me/font-awesome + +[class^="icon-"]:before, +[class*=" icon-"]:before + font-family: FontAwesome + font-weight: normal + font-style: normal + display: inline-block + +// makes the font 33% larger relative to the icon container +.icon-large:before + // display: inline-block; + font-size: 4 / 3em + +.btn + [class^="icon-"], + [class*=" icon-"] + line-height: .9em + // keeps button heights with and without icons the same + +li + [class^="icon-"], + [class*=" icon-"] + display: inline-block + width: 1.25em + text-align: center + .icon-large[class^="icon-"], + .icon-large[class*=" icon-"] + width: 1.5 * 1.25em + // 1.5 increased font size for icon-large * 1.25 width + +li[class^="icon-"], +li[class*=" icon-"] + margin-left: 0 + list-style-type: none + &:before + text-indent: -2em + text-align: center + &.icon-large:before + text-indent: -4 / 3em + +// Uses Unicode Private Use Area (PUA) to ensure screen readers do not read off +// random characters that represent icons +.icon-glass:before + content: "\f000" + +.icon-music:before + content: "\f001" + +.icon-search:before + content: "\f002" + +.icon-envelope:before + content: "\f003" + +.icon-heart:before + content: "\f004" + +.icon-star:before + content: "\f005" + +.icon-star-empty:before + content: "\f006" + +.icon-user:before + content: "\f007" + +.icon-film:before + content: "\f008" + +.icon-th-large:before + content: "\f009" + +.icon-th:before + content: "\f00a" + +.icon-th-list:before + content: "\f00b" + +.icon-ok:before + content: "\f00c" + +.icon-remove:before + content: "\f00d" + +.icon-zoom-in:before + content: "\f00e" + +.icon-zoom-out:before + content: "\f010" + +.icon-off:before + content: "\f011" + +.icon-signal:before + content: "\f012" + +.icon-cog:before + content: "\f013" + +.icon-trash:before + content: "\f014" + +.icon-home:before + content: "\f015" + +.icon-file:before + content: "\f016" + +.icon-time:before + content: "\f017" + +.icon-road:before + content: "\f018" + +.icon-download-alt:before + content: "\f019" + +.icon-download:before + content: "\f01a" + +.icon-upload:before + content: "\f01b" + +.icon-inbox:before + content: "\f01c" + +.icon-play-circle:before + content: "\f01d" + +.icon-repeat:before + content: "\f01e" + +// \f020 is not a valid unicode character. all shifted one down +.icon-refresh:before + content: "\f021" + +.icon-list-alt:before + content: "\f022" + +.icon-lock:before + content: "\f023" + +.icon-flag:before + content: "\f024" + +.icon-headphones:before + content: "\f025" + +.icon-volume-off:before + content: "\f026" + +.icon-volume-down:before + content: "\f027" + +.icon-volume-up:before + content: "\f028" + +.icon-qrcode:before + content: "\f029" + +.icon-barcode:before + content: "\f02a" + +.icon-tag:before + content: "\f02b" + +.icon-tags:before + content: "\f02c" + +.icon-book:before + content: "\f02d" + +.icon-bookmark:before + content: "\f02e" + +.icon-print:before + content: "\f02f" + +.icon-camera:before + content: "\f030" + +.icon-font:before + content: "\f031" + +.icon-bold:before + content: "\f032" + +.icon-italic:before + content: "\f033" + +.icon-text-height:before + content: "\f034" + +.icon-text-width:before + content: "\f035" + +.icon-align-left:before + content: "\f036" + +.icon-align-center:before + content: "\f037" + +.icon-align-right:before + content: "\f038" + +.icon-align-justify:before + content: "\f039" + +.icon-list:before + content: "\f03a" + +.icon-indent-left:before + content: "\f03b" + +.icon-indent-right:before + content: "\f03c" + +.icon-facetime-video:before + content: "\f03d" + +.icon-picture:before + content: "\f03e" + +.icon-pencil:before + content: "\f040" + +.icon-map-marker:before + content: "\f041" + +.icon-adjust:before + content: "\f042" + +.icon-tint:before + content: "\f043" + +.icon-edit:before + content: "\f044" + +.icon-share:before + content: "\f045" + +.icon-check:before + content: "\f046" + +.icon-move:before + content: "\f047" + +.icon-step-backward:before + content: "\f048" + +.icon-fast-backward:before + content: "\f049" + +.icon-backward:before + content: "\f04a" + +.icon-play:before + content: "\f04b" + +.icon-pause:before + content: "\f04c" + +.icon-stop:before + content: "\f04d" + +.icon-forward:before + content: "\f04e" + +.icon-fast-forward:before + content: "\f050" + +.icon-step-forward:before + content: "\f051" + +.icon-eject:before + content: "\f052" + +.icon-chevron-left:before + content: "\f053" + +.icon-chevron-right:before + content: "\f054" + +.icon-plus-sign:before + content: "\f055" + +.icon-minus-sign:before + content: "\f056" + +.icon-remove-sign:before + content: "\f057" + +.icon-ok-sign:before + content: "\f058" + +.icon-question-sign:before + content: "\f059" + +.icon-info-sign:before + content: "\f05a" + +.icon-screenshot:before + content: "\f05b" + +.icon-remove-circle:before + content: "\f05c" + +.icon-ok-circle:before + content: "\f05d" + +.icon-ban-circle:before + content: "\f05e" + +.icon-arrow-left:before + content: "\f060" + +.icon-arrow-right:before + content: "\f061" + +.icon-arrow-up:before + content: "\f062" + +.icon-arrow-down:before + content: "\f063" + +.icon-share-alt:before + content: "\f064" + +.icon-resize-full:before + content: "\f065" + +.icon-resize-small:before + content: "\f066" + +.icon-plus:before + content: "\f067" + +.icon-minus:before + content: "\f068" + +.icon-asterisk:before + content: "\f069" + +.icon-exclamation-sign:before + content: "\f06a" + +.icon-gift:before + content: "\f06b" + +.icon-leaf:before + content: "\f06c" + +.icon-fire:before + content: "\f06d" + +.icon-eye-open:before + content: "\f06e" + +.icon-eye-close:before + content: "\f070" + +.icon-warning-sign:before + content: "\f071" + +.icon-plane:before + content: "\f072" + +.icon-calendar:before + content: "\f073" + +.icon-random:before + content: "\f074" + +.icon-comment:before + content: "\f075" + +.icon-magnet:before + content: "\f076" + +.icon-chevron-up:before + content: "\f077" + +.icon-chevron-down:before + content: "\f078" + +.icon-retweet:before + content: "\f079" + +.icon-shopping-cart:before + content: "\f07a" + +.icon-folder-close:before + content: "\f07b" + +.icon-folder-open:before + content: "\f07c" + +.icon-resize-vertical:before + content: "\f07d" + +.icon-resize-horizontal:before + content: "\f07e" + +.icon-bar-chart:before + content: "\f080" + +.icon-twitter-sign:before + content: "\f081" + +.icon-facebook-sign:before + content: "\f082" + +.icon-camera-retro:before + content: "\f083" + +.icon-key:before + content: "\f084" + +.icon-cogs:before + content: "\f085" + +.icon-comments:before + content: "\f086" + +.icon-thumbs-up:before + content: "\f087" + +.icon-thumbs-down:before + content: "\f088" + +.icon-star-half:before + content: "\f089" + +.icon-heart-empty:before + content: "\f08a" + +.icon-signout:before + content: "\f08b" + +.icon-linkedin-sign:before + content: "\f08c" + +.icon-pushpin:before + content: "\f08d" + +.icon-external-link:before + content: "\f08e" + +.icon-signin:before + content: "\f090" + +.icon-trophy:before + content: "\f091" + +.icon-github-sign:before + content: "\f092" + +.icon-upload-alt:before + content: "\f093" + +.icon-lemon:before + content: "\f094" diff --git a/sass/font-awesome.scss b/sass/font-awesome.scss new file mode 100644 index 000000000..a2b2702d9 --- /dev/null +++ b/sass/font-awesome.scss @@ -0,0 +1,220 @@ +@import "compass/css3/font-face"; +$font_path: "../font/fontawesome-webfont" !default; + +@include font-face( + 'FontAwesome', + font-files( + "#{$font_path}.woff", woff, + "#{$font_path}.ttf", truetype, + "#{$font_path}.otf", opentype, + "#{$font_path}.svgz#FontAwesomeRegular", svg, + "#{$font_path}.svg#FontAwesomeRegular", svg), + '#{$font_path}.eot', + normal, + normal); + +// ICONS +// Glyphs and icons for buttons, nav, and more +// ------------------------------------------- +// Font Awesome courtesy of Dave Gandy at fortaweso.me/font-awesome + +[class^="icon-"]:before, +[class*=" icon-"]:before { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; +} + +// makes the font 33% larger relative to the icon container +.icon-large:before { +// display: inline-block; + font-size: 4/3em; +} + +.btn { + [class^="icon-"], + [class*=" icon-"] { + line-height: .9em; // keeps button heights with and without icons the same + } +} + +li { + [class^="icon-"], + [class*=" icon-"] { + display: inline-block; + width: 1.25em; + text-align: center; + } + .icon-large[class^="icon-"], + .icon-large[class*=" icon-"] { + width: 1.5*1.25em; // 1.5 increased font size for icon-large * 1.25 width + } +} + +li[class^="icon-"], +li[class*=" icon-"] { + margin-left: 0; + list-style-type: none; + + &:before { + text-indent: -2em; + text-align: center; + } + &.icon-large:before { + text-indent: -4/3em; + } +} + +// Uses Unicode Private Use Area (PUA) to ensure screen readers do not read off +// random characters that represent icons +.icon-glass:before { content: "\f000"; } +.icon-music:before { content: "\f001"; } +.icon-search:before { content: "\f002"; } +.icon-envelope:before { content: "\f003"; } +.icon-heart:before { content: "\f004"; } +.icon-star:before { content: "\f005"; } +.icon-star-empty:before { content: "\f006"; } +.icon-user:before { content: "\f007"; } +.icon-film:before { content: "\f008"; } +.icon-th-large:before { content: "\f009"; } +.icon-th:before { content: "\f00a"; } +.icon-th-list:before { content: "\f00b"; } +.icon-ok:before { content: "\f00c"; } +.icon-remove:before { content: "\f00d"; } +.icon-zoom-in:before { content: "\f00e"; } + +.icon-zoom-out:before { content: "\f010"; } +.icon-off:before { content: "\f011"; } +.icon-signal:before { content: "\f012"; } +.icon-cog:before { content: "\f013"; } +.icon-trash:before { content: "\f014"; } +.icon-home:before { content: "\f015"; } +.icon-file:before { content: "\f016"; } +.icon-time:before { content: "\f017"; } +.icon-road:before { content: "\f018"; } +.icon-download-alt:before { content: "\f019"; } +.icon-download:before { content: "\f01a"; } +.icon-upload:before { content: "\f01b"; } +.icon-inbox:before { content: "\f01c"; } +.icon-play-circle:before { content: "\f01d"; } +.icon-repeat:before { content: "\f01e"; } + +// \f020 is not a valid unicode character. all shifted one down +.icon-refresh:before { content: "\f021"; } +.icon-list-alt:before { content: "\f022"; } +.icon-lock:before { content: "\f023"; } +.icon-flag:before { content: "\f024"; } +.icon-headphones:before { content: "\f025"; } +.icon-volume-off:before { content: "\f026"; } +.icon-volume-down:before { content: "\f027"; } +.icon-volume-up:before { content: "\f028"; } +.icon-qrcode:before { content: "\f029"; } +.icon-barcode:before { content: "\f02a"; } +.icon-tag:before { content: "\f02b"; } +.icon-tags:before { content: "\f02c"; } +.icon-book:before { content: "\f02d"; } +.icon-bookmark:before { content: "\f02e"; } +.icon-print:before { content: "\f02f"; } + +.icon-camera:before { content: "\f030"; } +.icon-font:before { content: "\f031"; } +.icon-bold:before { content: "\f032"; } +.icon-italic:before { content: "\f033"; } +.icon-text-height:before { content: "\f034"; } +.icon-text-width:before { content: "\f035"; } +.icon-align-left:before { content: "\f036"; } +.icon-align-center:before { content: "\f037"; } +.icon-align-right:before { content: "\f038"; } +.icon-align-justify:before { content: "\f039"; } +.icon-list:before { content: "\f03a"; } +.icon-indent-left:before { content: "\f03b"; } +.icon-indent-right:before { content: "\f03c"; } +.icon-facetime-video:before { content: "\f03d"; } +.icon-picture:before { content: "\f03e"; } + +.icon-pencil:before { content: "\f040"; } +.icon-map-marker:before { content: "\f041"; } +.icon-adjust:before { content: "\f042"; } +.icon-tint:before { content: "\f043"; } +.icon-edit:before { content: "\f044"; } +.icon-share:before { content: "\f045"; } +.icon-check:before { content: "\f046"; } +.icon-move:before { content: "\f047"; } +.icon-step-backward:before { content: "\f048"; } +.icon-fast-backward:before { content: "\f049"; } +.icon-backward:before { content: "\f04a"; } +.icon-play:before { content: "\f04b"; } +.icon-pause:before { content: "\f04c"; } +.icon-stop:before { content: "\f04d"; } +.icon-forward:before { content: "\f04e"; } + +.icon-fast-forward:before { content: "\f050"; } +.icon-step-forward:before { content: "\f051"; } +.icon-eject:before { content: "\f052"; } +.icon-chevron-left:before { content: "\f053"; } +.icon-chevron-right:before { content: "\f054"; } +.icon-plus-sign:before { content: "\f055"; } +.icon-minus-sign:before { content: "\f056"; } +.icon-remove-sign:before { content: "\f057"; } +.icon-ok-sign:before { content: "\f058"; } +.icon-question-sign:before { content: "\f059"; } +.icon-info-sign:before { content: "\f05a"; } +.icon-screenshot:before { content: "\f05b"; } +.icon-remove-circle:before { content: "\f05c"; } +.icon-ok-circle:before { content: "\f05d"; } +.icon-ban-circle:before { content: "\f05e"; } + +.icon-arrow-left:before { content: "\f060"; } +.icon-arrow-right:before { content: "\f061"; } +.icon-arrow-up:before { content: "\f062"; } +.icon-arrow-down:before { content: "\f063"; } +.icon-share-alt:before { content: "\f064"; } +.icon-resize-full:before { content: "\f065"; } +.icon-resize-small:before { content: "\f066"; } +.icon-plus:before { content: "\f067"; } +.icon-minus:before { content: "\f068"; } +.icon-asterisk:before { content: "\f069"; } +.icon-exclamation-sign:before { content: "\f06a"; } +.icon-gift:before { content: "\f06b"; } +.icon-leaf:before { content: "\f06c"; } +.icon-fire:before { content: "\f06d"; } +.icon-eye-open:before { content: "\f06e"; } + +.icon-eye-close:before { content: "\f070"; } +.icon-warning-sign:before { content: "\f071"; } +.icon-plane:before { content: "\f072"; } +.icon-calendar:before { content: "\f073"; } +.icon-random:before { content: "\f074"; } +.icon-comment:before { content: "\f075"; } +.icon-magnet:before { content: "\f076"; } +.icon-chevron-up:before { content: "\f077"; } +.icon-chevron-down:before { content: "\f078"; } +.icon-retweet:before { content: "\f079"; } +.icon-shopping-cart:before { content: "\f07a"; } +.icon-folder-close:before { content: "\f07b"; } +.icon-folder-open:before { content: "\f07c"; } +.icon-resize-vertical:before { content: "\f07d"; } +.icon-resize-horizontal:before { content: "\f07e"; } + +.icon-bar-chart:before { content: "\f080"; } +.icon-twitter-sign:before { content: "\f081"; } +.icon-facebook-sign:before { content: "\f082"; } +.icon-camera-retro:before { content: "\f083"; } +.icon-key:before { content: "\f084"; } +.icon-cogs:before { content: "\f085"; } +.icon-comments:before { content: "\f086"; } +.icon-thumbs-up:before { content: "\f087"; } +.icon-thumbs-down:before { content: "\f088"; } +.icon-star-half:before { content: "\f089"; } +.icon-heart-empty:before { content: "\f08a"; } +.icon-signout:before { content: "\f08b"; } +.icon-linkedin-sign:before { content: "\f08c"; } +.icon-pushpin:before { content: "\f08d"; } +.icon-external-link:before { content: "\f08e"; } + +.icon-signin:before { content: "\f090"; } +.icon-trophy:before { content: "\f091"; } +.icon-github-sign:before { content: "\f092"; } +.icon-upload-alt:before { content: "\f093"; } +.icon-lemon:before { content: "\f094"; }