Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Font awesome #2479

Closed
wants to merge 3 commits into from
Closed

Font awesome #2479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
139c69b
added font-awesome support, and new variables @useFontIcons, @useSpri…
mandric Mar 7, 2012
22d9543
fixed sprites/font-awesome switch.
mandric Mar 7, 2012
2dea3ed
made font-awesome on by default.
mandric Mar 7, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Binary file added font/fontawesome-webfont.eot
View file
Open in desktop
Binary file not shown.
175 changes: 175 additions & 0 deletions font/fontawesome-webfont.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added font/fontawesome-webfont.svgz
View file
Open in desktop
Binary file not shown.
Binary file added font/fontawesome-webfont.ttf
View file
Open in desktop
Binary file not shown.
Binary file added font/fontawesome-webfont.woff
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions less/bootstrap.less
View file
Open in desktop
Expand Up @@ -28,6 +28,7 @@

// Components: common
@import "sprites.less";
@import "font-awesome.less";
@import "dropdowns.less";
@import "wells.less";
@import "component-animations.less";
Expand Down
222 changes: 222 additions & 0 deletions less/font-awesome.less
View file
Open in desktop
@@ -0,0 +1,222 @@
.fontIcons(@bool) when not (@bool) {}
.fontIcons(@bool) when (@bool) {
@font-face {
font-family: 'FontAwesome';
src: url('@{baseFontPath}fontawesome-webfont.eot');
src: url('@{baseFontPath}fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('@{baseFontPath}fontawesome-webfont.woff') format('woff'),
url('@{baseFontPath}fontawesome-webfont.ttf') format('truetype'),
url('@{baseFontPath}fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
url('@{baseFontPath}fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal;
font-style: 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"; }
} // close fontIcons switch
.fontIcons(@useFontIcons);

5 changes: 5 additions & 0 deletions less/sprites.less
View file
Open in desktop
Expand Up @@ -14,6 +14,9 @@
// For the white version of the icons, just add the .icon-white class:
// <i class="icon-inbox icon-white"></i>


.spriteIcons(@bool) when not (@bool) {}
.spriteIcons(@bool) when (@bool) {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
Expand Down Expand Up @@ -156,3 +159,5 @@
.icon-folder-open { background-position: -408px -120px; }
.icon-resize-vertical { background-position: -432px -119px; }
.icon-resize-horizontal { background-position: -456px -118px; }
}
.spriteIcons(@useSpriteIcons);
5 changes: 5 additions & 0 deletions less/variables.less
View file
Open in desktop
Expand Up @@ -36,6 +36,11 @@
@baseLineHeight: 18px;
@textColor: @grayDark;

// Icons
@useSpriteIcons: false;
@useFontIcons: true;
@baseFontPath: "../font/";

// Buttons
@primaryButtonBackground: @linkColor;

Expand Down