mirror of
https://github.com/ForkAwesome/Fork-Awesome
synced 2024-05-15 12:56:41 +02:00
adding new icons
This commit is contained in:
Dave Gandy
parent
f9d69f626b
commit
24bdc6e9b8
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 113 KiB |
Binary file not shown.
Binary file not shown.
92
docs/assets/less/font-awesome.less
vendored
92
docs/assets/less/font-awesome.less
vendored
|
|
@ -18,7 +18,7 @@
|
|||
-------------------------------------------------------
|
||||
Email: dave@davegandy.com
|
||||
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'),
|
||||
url('../font/fontawesome-webfont.woff') format('woff'),
|
||||
url('../font/fontawesome-webfont.ttf') format('truetype'),
|
||||
url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
|
||||
url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
|
||||
url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
|
||||
font-weight: 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
|
||||
------------------------------------------------------- */
|
||||
[class^="icon-"]:before,
|
||||
|
|
@ -70,7 +52,7 @@ a [class*=" icon-"] {
|
|||
|
||||
/* makes the font 33% larger relative to the icon container */
|
||||
.icon-large:before {
|
||||
vertical-align: top;
|
||||
vertical-align: middle;
|
||||
font-size: 4/3em;
|
||||
}
|
||||
|
||||
|
|
@ -262,3 +244,71 @@ li[class*=" icon-"] {
|
|||
.icon-github-sign:before { content: "\f092"; }
|
||||
.icon-upload-alt:before { content: "\f093"; }
|
||||
.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"; }
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
// These accomodate navbar-fixed-top
|
||||
#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;
|
||||
}
|
||||
.navbar .brand { padding: 11px 20px 9px; }
|
||||
|
|
@ -91,7 +91,7 @@ a[href^='http://'] {
|
|||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
padding: 13px 22px;
|
||||
padding-left: 22px + 44;
|
||||
padding-left: 24px + 44;
|
||||
margin-right: 10px;
|
||||
.border-radius(6px);
|
||||
position: relative;
|
||||
|
|
@ -102,6 +102,10 @@ a[href^='http://'] {
|
|||
left: 22px;
|
||||
font-size: 46px;
|
||||
}
|
||||
&.btn-github {
|
||||
padding-left: 30px + 44;
|
||||
|
||||
}
|
||||
}
|
||||
.hero-content {
|
||||
width: 500px;
|
||||
|
|
|
|||
124
docs/index.html
124
docs/index.html
|
|
@ -83,7 +83,7 @@
|
|||
<p>The iconic font designed for use with Twitter Bootstrap</p>
|
||||
<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-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>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<section id="why">
|
||||
<div class="row">
|
||||
<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.
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
|
@ -127,12 +127,126 @@
|
|||
Ever expanding to support a wider array of web-related actions.
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="span12">
|
||||
<h1>Base Icons</h1>
|
||||
|
|
@ -310,8 +424,6 @@
|
|||
</div>
|
||||
<div class="span3">
|
||||
<ul class="the-icons">
|
||||
<li class="icon-thumbs-up"></li>
|
||||
<li class="icon-thumbs-down"></li>
|
||||
<li class="icon-comments"></li>
|
||||
<li class="icon-trophy"></li>
|
||||
<li class="icon-upload-alt"></li>
|
||||
|
|
@ -501,7 +613,7 @@
|
|||
<i class="icon-camera-retro"></i> icon-camera-retro
|
||||
</div>
|
||||
</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>
|
||||
<div class="well">
|
||||
<div style="font-size: 24px;">
|
||||
|
|
|
|||
Loading…
Reference in a new issue