adding new icons

This commit is contained in:
Dave Gandy 2012-05-15 17:24:53 -04:00
parent f9d69f626b
commit 24bdc6e9b8
8 changed files with 6895 additions and 331 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 113 KiB

View file

@ -18,7 +18,7 @@
------------------------------------------------------- -------------------------------------------------------
Email: dave@davegandy.com Email: dave@davegandy.com
Twitter: http://twitter.com/fortaweso_me Twitter: http://twitter.com/fortaweso_me
Work: http://lemonwi.se co-founder Work: Lead Product Designer @ http://kyruus.com
*/ */
@ -28,29 +28,11 @@
src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.woff') format('woff'),
url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.ttf') format('truetype'),
url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
/* sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
}
li[class^="icon-"],
li[class*=" icon-"] {
display: block;
}
/* Font Awesome styles /* Font Awesome styles
------------------------------------------------------- */ ------------------------------------------------------- */
[class^="icon-"]:before, [class^="icon-"]:before,
@ -70,7 +52,7 @@ a [class*=" icon-"] {
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.icon-large:before { .icon-large:before {
vertical-align: top; vertical-align: middle;
font-size: 4/3em; font-size: 4/3em;
} }
@ -112,153 +94,221 @@ li[class*=" icon-"] {
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */ readers do not read off random characters that represent icons */
.icon-glass:before { content: "\f000"; } .icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; } .icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; } .icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; } .icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; } .icon-heart:before { content: "\f004"; }
.icon-star:before { content: "\f005"; } .icon-star:before { content: "\f005"; }
.icon-star-empty:before { content: "\f006"; } .icon-star-empty:before { content: "\f006"; }
.icon-user:before { content: "\f007"; } .icon-user:before { content: "\f007"; }
.icon-film:before { content: "\f008"; } .icon-film:before { content: "\f008"; }
.icon-th-large:before { content: "\f009"; } .icon-th-large:before { content: "\f009"; }
.icon-th:before { content: "\f00a"; } .icon-th:before { content: "\f00a"; }
.icon-th-list:before { content: "\f00b"; } .icon-th-list:before { content: "\f00b"; }
.icon-ok:before { content: "\f00c"; } .icon-ok:before { content: "\f00c"; }
.icon-remove:before { content: "\f00d"; } .icon-remove:before { content: "\f00d"; }
.icon-zoom-in:before { content: "\f00e"; } .icon-zoom-in:before { content: "\f00e"; }
.icon-zoom-out:before { content: "\f010"; } .icon-zoom-out:before { content: "\f010"; }
.icon-off:before { content: "\f011"; } .icon-off:before { content: "\f011"; }
.icon-signal:before { content: "\f012"; } .icon-signal:before { content: "\f012"; }
.icon-cog:before { content: "\f013"; } .icon-cog:before { content: "\f013"; }
.icon-trash:before { content: "\f014"; } .icon-trash:before { content: "\f014"; }
.icon-home:before { content: "\f015"; } .icon-home:before { content: "\f015"; }
.icon-file:before { content: "\f016"; } .icon-file:before { content: "\f016"; }
.icon-time:before { content: "\f017"; } .icon-time:before { content: "\f017"; }
.icon-road:before { content: "\f018"; } .icon-road:before { content: "\f018"; }
.icon-download-alt:before { content: "\f019"; } .icon-download-alt:before { content: "\f019"; }
.icon-download:before { content: "\f01a"; } .icon-download:before { content: "\f01a"; }
.icon-upload:before { content: "\f01b"; } .icon-upload:before { content: "\f01b"; }
.icon-inbox:before { content: "\f01c"; } .icon-inbox:before { content: "\f01c"; }
.icon-play-circle:before { content: "\f01d"; } .icon-play-circle:before { content: "\f01d"; }
.icon-repeat:before { content: "\f01e"; } .icon-repeat:before { content: "\f01e"; }
/* \f020 is not a valid unicode character. all shifted one down */ /* \f020 is not a valid unicode character. all shifted one down */
.icon-refresh:before { content: "\f021"; } .icon-refresh:before { content: "\f021"; }
.icon-list-alt:before { content: "\f022"; } .icon-list-alt:before { content: "\f022"; }
.icon-lock:before { content: "\f023"; } .icon-lock:before { content: "\f023"; }
.icon-flag:before { content: "\f024"; } .icon-flag:before { content: "\f024"; }
.icon-headphones:before { content: "\f025"; } .icon-headphones:before { content: "\f025"; }
.icon-volume-off:before { content: "\f026"; } .icon-volume-off:before { content: "\f026"; }
.icon-volume-down:before { content: "\f027"; } .icon-volume-down:before { content: "\f027"; }
.icon-volume-up:before { content: "\f028"; } .icon-volume-up:before { content: "\f028"; }
.icon-qrcode:before { content: "\f029"; } .icon-qrcode:before { content: "\f029"; }
.icon-barcode:before { content: "\f02a"; } .icon-barcode:before { content: "\f02a"; }
.icon-tag:before { content: "\f02b"; } .icon-tag:before { content: "\f02b"; }
.icon-tags:before { content: "\f02c"; } .icon-tags:before { content: "\f02c"; }
.icon-book:before { content: "\f02d"; } .icon-book:before { content: "\f02d"; }
.icon-bookmark:before { content: "\f02e"; } .icon-bookmark:before { content: "\f02e"; }
.icon-print:before { content: "\f02f"; } .icon-print:before { content: "\f02f"; }
.icon-camera:before { content: "\f030"; } .icon-camera:before { content: "\f030"; }
.icon-font:before { content: "\f031"; } .icon-font:before { content: "\f031"; }
.icon-bold:before { content: "\f032"; } .icon-bold:before { content: "\f032"; }
.icon-italic:before { content: "\f033"; } .icon-italic:before { content: "\f033"; }
.icon-text-height:before { content: "\f034"; } .icon-text-height:before { content: "\f034"; }
.icon-text-width:before { content: "\f035"; } .icon-text-width:before { content: "\f035"; }
.icon-align-left:before { content: "\f036"; } .icon-align-left:before { content: "\f036"; }
.icon-align-center:before { content: "\f037"; } .icon-align-center:before { content: "\f037"; }
.icon-align-right:before { content: "\f038"; } .icon-align-right:before { content: "\f038"; }
.icon-align-justify:before { content: "\f039"; } .icon-align-justify:before { content: "\f039"; }
.icon-list:before { content: "\f03a"; } .icon-list:before { content: "\f03a"; }
.icon-indent-left:before { content: "\f03b"; } .icon-indent-left:before { content: "\f03b"; }
.icon-indent-right:before { content: "\f03c"; } .icon-indent-right:before { content: "\f03c"; }
.icon-facetime-video:before { content: "\f03d"; } .icon-facetime-video:before { content: "\f03d"; }
.icon-picture:before { content: "\f03e"; } .icon-picture:before { content: "\f03e"; }
.icon-pencil:before { content: "\f040"; } .icon-pencil:before { content: "\f040"; }
.icon-map-marker:before { content: "\f041"; } .icon-map-marker:before { content: "\f041"; }
.icon-adjust:before { content: "\f042"; } .icon-adjust:before { content: "\f042"; }
.icon-tint:before { content: "\f043"; } .icon-tint:before { content: "\f043"; }
.icon-edit:before { content: "\f044"; } .icon-edit:before { content: "\f044"; }
.icon-share:before { content: "\f045"; } .icon-share:before { content: "\f045"; }
.icon-check:before { content: "\f046"; } .icon-check:before { content: "\f046"; }
.icon-move:before { content: "\f047"; } .icon-move:before { content: "\f047"; }
.icon-step-backward:before { content: "\f048"; } .icon-step-backward:before { content: "\f048"; }
.icon-fast-backward:before { content: "\f049"; } .icon-fast-backward:before { content: "\f049"; }
.icon-backward:before { content: "\f04a"; } .icon-backward:before { content: "\f04a"; }
.icon-play:before { content: "\f04b"; } .icon-play:before { content: "\f04b"; }
.icon-pause:before { content: "\f04c"; } .icon-pause:before { content: "\f04c"; }
.icon-stop:before { content: "\f04d"; } .icon-stop:before { content: "\f04d"; }
.icon-forward:before { content: "\f04e"; } .icon-forward:before { content: "\f04e"; }
.icon-fast-forward:before { content: "\f050"; } .icon-fast-forward:before { content: "\f050"; }
.icon-step-forward:before { content: "\f051"; } .icon-step-forward:before { content: "\f051"; }
.icon-eject:before { content: "\f052"; } .icon-eject:before { content: "\f052"; }
.icon-chevron-left:before { content: "\f053"; } .icon-chevron-left:before { content: "\f053"; }
.icon-chevron-right:before { content: "\f054"; } .icon-chevron-right:before { content: "\f054"; }
.icon-plus-sign:before { content: "\f055"; } .icon-plus-sign:before { content: "\f055"; }
.icon-minus-sign:before { content: "\f056"; } .icon-minus-sign:before { content: "\f056"; }
.icon-remove-sign:before { content: "\f057"; } .icon-remove-sign:before { content: "\f057"; }
.icon-ok-sign:before { content: "\f058"; } .icon-ok-sign:before { content: "\f058"; }
.icon-question-sign:before { content: "\f059"; } .icon-question-sign:before { content: "\f059"; }
.icon-info-sign:before { content: "\f05a"; } .icon-info-sign:before { content: "\f05a"; }
.icon-screenshot:before { content: "\f05b"; } .icon-screenshot:before { content: "\f05b"; }
.icon-remove-circle:before { content: "\f05c"; } .icon-remove-circle:before { content: "\f05c"; }
.icon-ok-circle:before { content: "\f05d"; } .icon-ok-circle:before { content: "\f05d"; }
.icon-ban-circle:before { content: "\f05e"; } .icon-ban-circle:before { content: "\f05e"; }
.icon-arrow-left:before { content: "\f060"; } .icon-arrow-left:before { content: "\f060"; }
.icon-arrow-right:before { content: "\f061"; } .icon-arrow-right:before { content: "\f061"; }
.icon-arrow-up:before { content: "\f062"; } .icon-arrow-up:before { content: "\f062"; }
.icon-arrow-down:before { content: "\f063"; } .icon-arrow-down:before { content: "\f063"; }
.icon-share-alt:before { content: "\f064"; } .icon-share-alt:before { content: "\f064"; }
.icon-resize-full:before { content: "\f065"; } .icon-resize-full:before { content: "\f065"; }
.icon-resize-small:before { content: "\f066"; } .icon-resize-small:before { content: "\f066"; }
.icon-plus:before { content: "\f067"; } .icon-plus:before { content: "\f067"; }
.icon-minus:before { content: "\f068"; } .icon-minus:before { content: "\f068"; }
.icon-asterisk:before { content: "\f069"; } .icon-asterisk:before { content: "\f069"; }
.icon-exclamation-sign:before { content: "\f06a"; } .icon-exclamation-sign:before { content: "\f06a"; }
.icon-gift:before { content: "\f06b"; } .icon-gift:before { content: "\f06b"; }
.icon-leaf:before { content: "\f06c"; } .icon-leaf:before { content: "\f06c"; }
.icon-fire:before { content: "\f06d"; } .icon-fire:before { content: "\f06d"; }
.icon-eye-open:before { content: "\f06e"; } .icon-eye-open:before { content: "\f06e"; }
.icon-eye-close:before { content: "\f070"; } .icon-eye-close:before { content: "\f070"; }
.icon-warning-sign:before { content: "\f071"; } .icon-warning-sign:before { content: "\f071"; }
.icon-plane:before { content: "\f072"; } .icon-plane:before { content: "\f072"; }
.icon-calendar:before { content: "\f073"; } .icon-calendar:before { content: "\f073"; }
.icon-random:before { content: "\f074"; } .icon-random:before { content: "\f074"; }
.icon-comment:before { content: "\f075"; } .icon-comment:before { content: "\f075"; }
.icon-magnet:before { content: "\f076"; } .icon-magnet:before { content: "\f076"; }
.icon-chevron-up:before { content: "\f077"; } .icon-chevron-up:before { content: "\f077"; }
.icon-chevron-down:before { content: "\f078"; } .icon-chevron-down:before { content: "\f078"; }
.icon-retweet:before { content: "\f079"; } .icon-retweet:before { content: "\f079"; }
.icon-shopping-cart:before { content: "\f07a"; } .icon-shopping-cart:before { content: "\f07a"; }
.icon-folder-close:before { content: "\f07b"; } .icon-folder-close:before { content: "\f07b"; }
.icon-folder-open:before { content: "\f07c"; } .icon-folder-open:before { content: "\f07c"; }
.icon-resize-vertical:before { content: "\f07d"; } .icon-resize-vertical:before { content: "\f07d"; }
.icon-resize-horizontal:before { content: "\f07e"; } .icon-resize-horizontal:before { content: "\f07e"; }
.icon-bar-chart:before { content: "\f080"; } .icon-bar-chart:before { content: "\f080"; }
.icon-twitter-sign:before { content: "\f081"; } .icon-twitter-sign:before { content: "\f081"; }
.icon-facebook-sign:before { content: "\f082"; } .icon-facebook-sign:before { content: "\f082"; }
.icon-camera-retro:before { content: "\f083"; } .icon-camera-retro:before { content: "\f083"; }
.icon-key:before { content: "\f084"; } .icon-key:before { content: "\f084"; }
.icon-cogs:before { content: "\f085"; } .icon-cogs:before { content: "\f085"; }
.icon-comments:before { content: "\f086"; } .icon-comments:before { content: "\f086"; }
.icon-thumbs-up:before { content: "\f087"; } .icon-thumbs-up:before { content: "\f087"; }
.icon-thumbs-down:before { content: "\f088"; } .icon-thumbs-down:before { content: "\f088"; }
.icon-star-half:before { content: "\f089"; } .icon-star-half:before { content: "\f089"; }
.icon-heart-empty:before { content: "\f08a"; } .icon-heart-empty:before { content: "\f08a"; }
.icon-signout:before { content: "\f08b"; } .icon-signout:before { content: "\f08b"; }
.icon-linkedin-sign:before { content: "\f08c"; } .icon-linkedin-sign:before { content: "\f08c"; }
.icon-pushpin:before { content: "\f08d"; } .icon-pushpin:before { content: "\f08d"; }
.icon-external-link:before { content: "\f08e"; } .icon-external-link:before { content: "\f08e"; }
.icon-signin:before { content: "\f090"; } .icon-signin:before { content: "\f090"; }
.icon-trophy:before { content: "\f091"; } .icon-trophy:before { content: "\f091"; }
.icon-github-sign:before { content: "\f092"; } .icon-github-sign:before { content: "\f092"; }
.icon-upload-alt:before { content: "\f093"; } .icon-upload-alt:before { content: "\f093"; }
.icon-lemon:before { content: "\f094"; } .icon-lemon:before { content: "\f094"; }
.icon-phone:before { content: "\f095"; }
.icon-check-empty:before { content: "\f096"; }
.icon-bookmark-empty:before { content: "\f097"; }
.icon-phone-sign:before { content: "\f098"; }
.icon-twitter:before { content: "\f099"; }
.icon-facebook:before { content: "\f09a"; }
.icon-github:before { content: "\f09b"; }
.icon-unlock:before { content: "\f09c"; }
.icon-credit-card:before { content: "\f09d"; }
.icon-rss:before { content: "\f09e"; }
.icon-hdd:before { content: "\f0a0"; }
.icon-bullhorn:before { content: "\f0a1"; }
.icon-bell:before { content: "\f0a2"; }
.icon-certificate:before { content: "\f0a3"; }
.icon-hand-right:before { content: "\f0a4"; }
.icon-hand-left:before { content: "\f0a5"; }
.icon-hand-up:before { content: "\f0a6"; }
.icon-hand-down:before { content: "\f0a7"; }
.icon-circle-arrow-left:before { content: "\f0a8"; }
.icon-circle-arrow-right:before { content: "\f0a9"; }
.icon-circle-arrow-up:before { content: "\f0aa"; }
.icon-circle-arrow-down:before { content: "\f0ab"; }
.icon-globe:before { content: "\f0ac"; }
.icon-wrench:before { content: "\f0ad"; }
.icon-tasks:before { content: "\f0ae"; }
.icon-filter:before { content: "\f0b0"; }
.icon-briefcase:before { content: "\f0b1"; }
.icon-fullscreen:before { content: "\f0b2"; }
.icon-group:before { content: "\f0c0"; }
.icon-link:before { content: "\f0c1"; }
.icon-cloud:before { content: "\f0c2"; }
.icon-beaker:before { content: "\f0c3"; }
.icon-cut:before { content: "\f0c4"; }
.icon-copy:before { content: "\f0c5"; }
.icon-paper-clip:before { content: "\f0c6"; }
.icon-save:before { content: "\f0c7"; }
.icon-sign-blank:before { content: "\f0c8"; }
.icon-reorder:before { content: "\f0c9"; }
.icon-ul:before { content: "\f0ca"; }
.icon-ol:before { content: "\f0cb"; }
.icon-strikethrough:before { content: "\f0cc"; }
.icon-underline:before { content: "\f0cd"; }
.icon-table:before { content: "\f0ce"; }
.icon-magic:before { content: "\f0d0"; }
.icon-truck:before { content: "\f0d1"; }
.icon-pinterest:before { content: "\f0d2"; }
.icon-pinterest-sign:before { content: "\f0d3"; }
.icon-google-plus-sign:before { content: "\f0d4"; }
.icon-google-plus:before { content: "\f0d5"; }
.icon-money:before { content: "\f0d6"; }
.icon-caret-down:before { content: "\f0d7"; }
.icon-caret-up:before { content: "\f0d8"; }
.icon-caret-left:before { content: "\f0d9"; }
.icon-caret-right:before { content: "\f0da"; }
.icon-columns:before { content: "\f0db"; }
.icon-sort:before { content: "\f0dc"; }
.icon-sort-down:before { content: "\f0dd"; }
.icon-sort-up:before { content: "\f0de"; }
.icon-user-md:before { content: "\f200"; }
.icon-chart-pie-one-third:before { content: "\f201"; }
.icon-chart-pie-two-thirds:before { content: "\f202"; }
.icon-chart-pie-full:before { content: "\f203"; }
.icon-chart-pie-empty:before { content: "\f204"; }

View file

@ -8,7 +8,7 @@
// These accomodate navbar-fixed-top // These accomodate navbar-fixed-top
#overview { padding-top: 60px; } #overview { padding-top: 60px; }
#base-icons, #extended-icons, #examples, #integration, #code, #roadmap { #new-icons, #base-icons, #extended-icons, #examples, #integration, #code, #roadmap {
padding-top: 40px; padding-top: 40px;
} }
.navbar .brand { padding: 11px 20px 9px; } .navbar .brand { padding: 11px 20px 9px; }
@ -91,7 +91,7 @@ a[href^='http://'] {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
padding: 13px 22px; padding: 13px 22px;
padding-left: 22px + 44; padding-left: 24px + 44;
margin-right: 10px; margin-right: 10px;
.border-radius(6px); .border-radius(6px);
position: relative; position: relative;
@ -102,6 +102,10 @@ a[href^='http://'] {
left: 22px; left: 22px;
font-size: 46px; font-size: 46px;
} }
&.btn-github {
padding-left: 30px + 44;
}
} }
.hero-content { .hero-content {
width: 500px; width: 500px;

View file

@ -83,7 +83,7 @@
<p>The iconic font designed for use with Twitter Bootstrap</p> <p>The iconic font designed for use with Twitter Bootstrap</p>
<div class="actions"> <div class="actions">
<a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master"><i class="icon-download"></i> Download<br>Font Awesome</a> <a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master"><i class="icon-download"></i> Download<br>Font Awesome</a>
<a class="btn btn-large" href="https://github.com/FortAwesome/Font-Awesome"><i class="icon-github-sign"></i> View Project<br>on GitHub</a> <a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome"><i class="icon-github"></i> View Project<br>on GitHub</a>
</div> </div>
</div> </div>
</div> </div>
@ -91,7 +91,7 @@
<section id="why"> <section id="why">
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h3><i class="icon-flag icon-large"></i> One font, 150+ icons</h3> <h3><i class="icon-flag icon-large"></i> One font, 200+ icons</h3>
In a single collection, Font Awesome is a pictographic language of web-related actions. In a single collection, Font Awesome is a pictographic language of web-related actions.
</div> </div>
<div class="span4"> <div class="span4">
@ -127,12 +127,126 @@
Ever expanding to support a wider array of web-related actions. Ever expanding to support a wider array of web-related actions.
</div> </div>
<div class="span4"> <div class="span4">
<h3><i class="icon-twitter-sign icon-large"></i> Follow on Twitter</h3> <h3><i class="icon-twitter icon-large"></i> Follow on Twitter</h3>
Follow <a href="http://twitter.com/fortaweso_me/" target="_blank">@fortaweso_me</a> on Twitter for icon updates and styling tricks. Follow <a href="http://twitter.com/fortaweso_me/" target="_blank">@fortaweso_me</a> on Twitter for icon updates and styling tricks.
</div> </div>
</div> </div>
</section> </section>
<section id="new-icons" class="row">
<div class="span12">
<h1>New Icons</h1>
<p>66 shiny new icons added to Font Awesome 2.0.3. Yep. That puts us well over 200.</p>
</div>
<div class="span12">
<h2>Parity with Twitter Bootstrap 2.0.3</h2>
<p>Twitter Bootstrap 2.0.3 added several new icons, which we have redesigned from scratch and added to Font Awesome 2.0.3</p>
</div>
<div class="span3">
<ul class="the-icons">
<li class="icon-hdd"></li>
<li class="icon-bullhorn"></li>
<li class="icon-bell"></li>
<li class="icon-certificate"></li>
<li class="icon-thumbs-up"></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li class="icon-thumbs-down"></li>
<li class="icon-hand-right"></li>
<li class="icon-hand-left"></li>
<li class="icon-hand-up"></li>
<li class="icon-hand-down"></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li class="icon-circle-arrow-left"></li>
<li class="icon-circle-arrow-right"></li>
<li class="icon-circle-arrow-up"></li>
<li class="icon-circle-arrow-down"></li>
<li class="icon-globe"></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li class="icon-wrench"></li>
<li class="icon-tasks"></li>
<li class="icon-filter"></li>
<li class="icon-briefcase"></li>
<li class="icon-fullscreen"></li>
</ul>
</div>
<div class="span12">
<h2>User Requested</h2>
<p>You asked, Font Awesome delivered. Here's a giant new set of icons requested on the Font Awesome GitHub project.</p>
</div>
<div class="span3">
<ul class="the-icons">
<li class="icon-magic"></li>
<li class="icon-phone"></li>
<li class="icon-check-empty"></li>
<li class="icon-bookmark-empty"></li>
<li class="icon-phone-sign"></li>
<li class="icon-twitter"></li>
<li class="icon-facebook"></li>
<li class="icon-github"></li>
<li class="icon-unlock"></li>
<li class="icon-credit-card"></li>
<li class="icon-rss"></li>
<li class="icon-group"></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li class="icon-link"></li>
<li class="icon-cloud"></li>
<li class="icon-beaker"></li>
<li class="icon-cut"></li>
<li class="icon-copy"></li>
<li class="icon-paper-clip"></li>
<li class="icon-save"></li>
<li class="icon-sign-blank"></li>
<li class="icon-reorder"></li>
<li class="icon-ul"></li>
<li class="icon-ol"></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li class="icon-strikethrough"></li>
<li class="icon-underline"></li>
<li class="icon-table"></li>
<li class="icon-columns"></li>
<li class="icon-truck"></li>
<li class="icon-pinterest"></li>
<li class="icon-pinterest-sign"></li>
<li class="icon-google-plus-sign"></li>
<li class="icon-google-plus"></li>
<li class="icon-money"></li>
<li class="icon-user-md"></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li class="icon-caret-down"></li>
<li class="icon-caret-up"></li>
<li class="icon-caret-left"></li>
<li class="icon-caret-right"></li>
<li class="icon-sort"></li>
<li class="icon-sort-down"></li>
<li class="icon-sort-up"></li>
<li class="icon-chart-pie-empty"></li>
<li class="icon-chart-pie-one-third"></li>
<li class="icon-chart-pie-two-thirds"></li>
<li class="icon-chart-pie-full"></li>
</ul>
</div>
</section>
<section id="base-icons" class="row"> <section id="base-icons" class="row">
<div class="span12"> <div class="span12">
<h1>Base Icons</h1> <h1>Base Icons</h1>
@ -310,8 +424,6 @@
</div> </div>
<div class="span3"> <div class="span3">
<ul class="the-icons"> <ul class="the-icons">
<li class="icon-thumbs-up"></li>
<li class="icon-thumbs-down"></li>
<li class="icon-comments"></li> <li class="icon-comments"></li>
<li class="icon-trophy"></li> <li class="icon-trophy"></li>
<li class="icon-upload-alt"></li> <li class="icon-upload-alt"></li>
@ -501,7 +613,7 @@
&lt;i class="icon-camera-retro"&gt;&lt;/i&gt; icon-camera-retro &lt;i class="icon-camera-retro"&gt;&lt;/i&gt; icon-camera-retro
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div> <div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :
<p>Increase the icon size by using the <code>icon-large</code> class. This increases the size by 33% relative to the font-size of the container.</p> <p>Increase the icon size by using the <code>icon-large</code> class. This increases the size by 33% relative to the font-size of the container.</p>
<div class="well"> <div class="well">
<div style="font-size: 24px;"> <div style="font-size: 24px;">