FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2025-01-14 17:20:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

major overhaul to icon pages

Browse Source
This commit is contained in:
davegandy 2013-05-02 23:16:41 -04:00
parent fd07665888
commit a4831774d8
16 changed files with 264 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@ -9,6 +9,8 @@ source: build
destination: _gh_pages
plugins: build/_plugins
pygments: true
icon_meta: build/icons.yml
icon_layout: icon.html # Relative to _layouts directory
icon_destination: icon # Relative to destination

1
build/_includes/ads/carbon-light-vertical.html Normal file
View File

@ -0,0 +1 @@
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>

15
build/_includes/examples.html
View File

@ -1,6 +1,5 @@
<section id="examples">
<h2 class="page-header">Examples</h2>
<p>Many examples re-used from the Twitter Bootstrap documentation.</p>
<h3 class="page-header">Many examples appreciatively re-used from the <a href="{{ site.bootstrap.url }}">Bootstrap documentation</a>.</h3>
<div class="row">
<div class="span4">
<div class="well well-transparent">
@ -95,7 +94,7 @@
</div>
<div class="span4">
<p>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version {{ site.font-awesome.version }}</a>
</p>
<a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
</div>
@ -178,14 +177,6 @@
</p>
</div>
</div>
<div class="row">
<div class="span3">
</div>
<div class="span9">
</div>
</div>
<div class="row">
<div class="span12">
<h4>Bordered & Pulled Icons</h4>
@ -243,7 +234,7 @@ Use a few of the new styles together ... lots of new possibilities.
<i class="icon-cog"></i> Settings</a>
</p>
<p>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version {{ site.font-awesome.version }}</a>
</p>
<p>
<a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

2
build/_includes/footer.html
View File

@ -11,7 +11,7 @@
Documentation licensed under <a href="{{ site.license.documentation.url }}">{{ site.license.documentation.version }}</a>
</div>
<div>
Many doc examples taken from <a href="{{ site.bootstrap.url }}">Bootstrap's docs</a>
Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN for Font Awesome</a>
</div>
<div class="project">
<a href="{{ site.font-awesome.github.url }}">GitHub Project</a> &middot;

1
build/_includes/icons/new.html
View File

@ -43,6 +43,7 @@
<li><a href="{{ site.baseurl }}icon/calendar-empty"><i class="icon-calendar-empty"></i> icon-calendar-empty</a></li>
<li><a href="{{ site.baseurl }}icon/fire-extinguisher"><i class="icon-fire-extinguisher"></i> icon-fire-extinguisher</a></li>
<li><a href="{{ site.baseurl }}icon/rocket"><i class="icon-rocket"></i> icon-rocket</a></li>
<li><a href="{{ site.baseurl }}icon/maxcdn"><i class="icon-maxcdn"></i> icon-maxcdn</a></li>
</ul>
</div>
</section>

1
build/_includes/roadmap.html
View File

@ -1,5 +1,4 @@
<section id="roadmap">
<h2 class="page-header">Roadmap</h2>
<p>Here's the plan for future updates.</p>
<ul class="icons">
<li><i class="icon-plus"></i>Easier sub-setting with icon packs.</li>

131
build/_layouts/icon.html
View File

@ -2,38 +2,107 @@
layout: base
title_prefix: Font Awesome Icons
---
<div class="jumbotron jumbotron-icon">
<div class="container">
<div class="info-icons">
<i class="icon-{{ page.icon['id'] }} icon-6"></i>&nbsp;&nbsp;
<i class="icon-{{ page.icon['id'] }} icon-5"></i>&nbsp;&nbsp;
<i class="icon-{{ page.icon['id'] }} icon-4"></i>&nbsp;&nbsp;
<i class="icon-{{ page.icon['id'] }} icon-3"></i>&nbsp;&nbsp;
<i class="icon-{{ page.icon['id'] }} icon-2"></i>&nbsp;&nbsp;
<i class="icon-{{ page.icon['id'] }} icon-1"></i>
</div>
<h1 class="info-class">
icon-{{ page.icon['id'] }}
<small>
<i class="icon-{{ page.icon['id'] }}"></i> &middot;
Unicode: {{ page.icon['unicode'] }} &middot;
Created: v{{ page.icon['created'] }} &middot;
Categories:
{% for category in page.icon['categories'] %}
{{ category }}{% unless forloop.last %},{% endunless %}
{% endfor %}
{% if page.icon['aliases'] %}
Aliases:
{% for alias in page.icon['aliases'] %}
{{ alias }}{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endif %}
</small>
</h1>
<!--<div class="row-fluid">-->
<!--<div class="span6">-->
<!--<div class="info-icons">-->
<!--<i class="icon-{{ page.icon['id'] }} icon-5"></i>-->
<!--<i class="icon-{{ page.icon['id'] }} icon-4"></i>-->
<!--<i class="icon-{{ page.icon['id'] }} icon-3"></i>-->
<!--<i class="icon-{{ page.icon['id'] }} icon-2"></i>-->
<!--<i class="icon-{{ page.icon['id'] }} icon-1"></i>-->
<!--</div>-->
<!--&lt;!&ndash;<p class="info-class">icon-{{ page.icon['id'] }}</p>&ndash;&gt;-->
<!--</div>-->
<!--<div class="span6">-->
<!--<div class="info-details">-->
<!--<h1>icon-{{ page.icon['id'] }}</h1>-->
<!--<dl class="dl-horizontal">-->
<!--<dt>Icon</dt>-->
<!--<dd><i class="icon-{{ page.icon['id'] }}"></i></dd>-->
<!--<dt>Unicode</dt>-->
<!--<dd>{{ page.icon['unicode'] }}</dd>-->
<!--<dt>Created</dt>-->
<!--<dd>v{{ page.icon['created'] }}</dd>-->
<!--{% if page.icon['categories'] %}-->
<!--<dt>Categories</dt>-->
<!--<dd>-->
<!--{% for category in page.icon['categories'] %}-->
<!--{{ category }}<br>-->
<!--{% endfor %}-->
<!--</dd>-->
<!--{% endif %}-->
<!--{% if page.icon['aliases'] %}-->
<!--<dt>Aliases</dt>-->
<!--<dd>-->
<!--{% for alias in page.icon['aliases'] %}-->
<!--{{ alias }}<br>-->
<!--{% endfor %}-->
<!--</dd>-->
<!--{% endif %}-->
<!--</dl>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<div class="container">
<section>
<dl class="dl-horizontal">
<dt>Icon</dt>
<dd><i class="icon-{{ page.icon['id'] }}"></i></dd>
<dt>Icon Class</dt>
<dd>icon-{{ page.icon['id'] }}</dd>
<dt>Unicode</dt>
<dd>{{ page.icon['unicode'] }}</dd>
<dt>Created</dt>
<dd>v{{ page.icon['created'] }}</dd>
{% if page.icon['categories'] %}
<dt>Categories</dt>
<dd>
{% for category in page.icon['categories'] %}
{{ category }}<br>
{% endfor %}
</dd>
{% endif %}
{% if page.icon['aliases'] %}
<dt>Aliases</dt>
<dd>
{% for alias in page.icon['aliases'] %}
{{ alias }}<br>
{% endfor %}
</dd>
{% endif %}
</dl>
<div class="row-fluid">
<div class="span9">
<p>After you get <a href="{{ site.baseurl }}integration/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
<div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;">
<i class="icon-{{ page.icon['id'] }}"></i> icon-{{ page.icon['id'] }}
</div>
</div>
{% highlight html %}
<i class="icon-{{ page.icon['id'] }}"></i> icon-{{ page.icon['id'] }}
{% endhighlight %}
<br>
<div class="lead"><i class="icon-info-sign"></i> Looking for more? Check out the <a href="{{ site.baseurl }}examples/">examples</a>.</div>
</div>
<div class="span3">
<div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>
</div>
</div>
</section>
</div>

12
build/assets/css/font-awesome.css vendored
View File

@ -178,6 +178,15 @@ ul.icons li [class*=" icon-"] {
-moz-border-radius: 6px;
border-radius: 6px;
}
.icon-5x {
font-size: 5em;
}
.icon-5x.icon-border {
border-width: 5px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.pull-right {
float: right;
}
@ -1134,3 +1143,6 @@ ul.icons li [class*=" icon-"] {
.icon-rocket:before {
content: "\f135";
}
.icon-maxcdn:before {
content: "\f136";
}

71
build/assets/css/site.css
View File

@ -5266,14 +5266,14 @@ body {
min-width: 990px;
}
.wrapper {
margin: 0 auto -191px;
margin: 0 auto -211px;
}
.push {
height: 191px;
height: 211px;
}
.footer {
margin-top: 40px;
height: 90px;
height: 110px;
padding: 30px 0 30px;
}
.navbar .brand {
@ -5285,6 +5285,9 @@ body {
.navbar .nav > li > a {
padding: 12px 10px 9px;
}
.navbar .nav.pull-right {
margin-right: -10px;
}
h1,
h2,
h3,
@ -5368,6 +5371,9 @@ h6 {
color: #ce938e;
text-shadow: none;
}
.jumbotron .carbonad {
text-shadow: none;
}
.jumbotron-ad {
padding: 20px 0;
}
@ -5377,6 +5383,65 @@ h6 {
.jumbotron-ad p {
margin-bottom: 35px;
}
.jumbotron-icon {
padding: 20px 0 30px;
background-color: #eeeeee;
color: #222222;
text-shadow: 1px 1px 1px #ffffff;
border-bottom: solid 1px #c4c4c4;
}
.jumbotron-icon h1 {
color: #222222;
font-size: 40px;
}
.jumbotron-icon h1 small {
letter-spacing: normal;
font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
margin-left: 20px;
}
.jumbotron-icon .info-details {
float: left;
}
.jumbotron-icon .info-details p {
margin: 25px 0;
font-weight: bold;
}
.jumbotron-icon .info-details .dl-horizontal dt {
width: 80px;
}
.jumbotron-icon .info-details .dl-horizontal dd {
margin-left: 95px;
}
.jumbotron-icon .icon-2 {
font-size: 2em;
}
.jumbotron-icon .icon-3 {
font-size: 4em;
}
.jumbotron-icon .icon-4 {
font-size: 7em;
}
.jumbotron-icon .icon-5 {
font-size: 12em;
}
.jumbotron-icon .icon-6 {
font-size: 20em;
}
.jumbotron-icon .icon-1,
.jumbotron-icon .icon-2,
.jumbotron-icon .icon-3,
.jumbotron-icon .icon-4,
.jumbotron-icon .icon-5,
.jumbotron-icon .icon-6 {
margin-right: 0.07142857142857142em;
}
.info-ad {
float: right;
width: 154px;
height: 219px;
margin-left: 15px;
}
.btn-github {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

BIN
build/assets/font/FontAwesome.otf
View File

Binary file not shown.

1
build/assets/js/index/index.js
View File

@ -5,6 +5,7 @@ $(function() {
});
// make code pretty
$('pre').addClass('prettyprint');
window.prettyPrint && prettyPrint();
// inject twitter & github counts

10
build/assets/less/font-awesome.less vendored
View File

@ -181,6 +181,15 @@ ul.icons {
}
}
.icon-5x {
font-size: 5em;
&.icon-border {
border-width: 5px;
.border-radius(7px);
}
}
// Floats
// -------------------------
@ -572,3 +581,4 @@ ul.icons {
.icon-calendar-empty:before { content: "\f133"; }
.icon-fire-extinguisher:before { content: "\f134"; }
.icon-rocket:before { content: "\f135"; }
.icon-maxcdn:before { content: "\f136"; }

56
build/assets/less/site.less
View File

@ -13,6 +13,8 @@
.navbar .nav > li > a { padding: 12px 10px 9px; }
.navbar .nav.pull-right { margin-right: -10px; }
h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
#iconCarousel {
@ -113,6 +115,7 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
color: mix(@white, @red, 50%);
text-shadow: none;
}
.carbonad { text-shadow: none; }
}
.jumbotron-ad {
@ -121,6 +124,59 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
p { margin-bottom: 35px; }
}
.jumbotron-icon {
padding: 20px 0 30px;
background-color: @grayLighter;
color: @grayDarker;
text-shadow: 1px 1px 1px @white;
border-bottom: solid 1px mix(@grayLight, @grayLighter, 50%);
h1 {
color: @grayDarker;
font-size: 40px;
// margin: 25px 0 20px;
small {
letter-spacing: normal;
font-family: @sansFontFamily;
font-size: @baseFontSize;
margin-left: 20px;
}
}
.info-icons {
// margin-top: 10px;
// text-align: center;
}
.info-class {
}
.info-details {
float: left;
p {
margin: 25px 0;
font-weight: bold;
}
.dl-horizontal {
dt { width: @horizontalComponentOffset - 100; }
dd { margin-left: @horizontalComponentOffset - 85; }
}
}
.icon-2 { font-size: 2em; }
.icon-3 { font-size: 4em; }
.icon-4 { font-size: 7em; }
.icon-5 { font-size: 12em; }
.icon-6 { font-size: 20em; }
.icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 1/14em; }
}
.info-ad {
float: right;
width: 154px;
height: 219px;
margin-left: 15px;
}
.btn-github {
.buttonBackground(@white, mix(@grayLighter, @grayLight, 50%));
}

2
build/assets/less/sticky-footer.less
View File

@ -24,4 +24,4 @@ html, body {
// }
}
.sticky-footer(90px, 30px, 30px, 40px); // sets default values for sticky footer
.sticky-footer(110px, 30px, 30px, 40px); // sets default values for sticky footer

2
build/examples/index.html
View File

@ -4,7 +4,7 @@ title: Font Awesome Examples
navbar_active: examples
---
{% capture jumbotron_h1 %}<i class="icon-magic icon-large"></i>&nbsp; Examples{% endcapture %}
{% capture jumbotron_p %}Some great examples of easy ways to use Font Awesome{% endcapture %}
{% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
{% include jumbotron.html %}
{% include stripe-social.html %}

7
build/icons.yml
View File

@ -1986,3 +1986,10 @@ icons:
created: 3.1.0
categories:
- Web Application Icons
- name: MaxCDN
id: maxcdn
unicode: f136
created: 3.1.0
categories:
- Web Application Icons