This commit is contained in:
davegandy 2013-05-07 17:57:23 -04:00
parent b4a346246a
commit 86e31c972d
13 changed files with 152 additions and 30 deletions

View file

@ -0,0 +1,51 @@
<p>
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-twitter icon-light"></i>
</span>
Twitter Icon
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-facebook icon-light"></i>
</span>
Facebook Icon
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-github icon-light"></i>
</span>
GitHub Icon
</p>
<p>
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-twitter icon-light"></i>
</span>
Twitter Icon
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-facebook icon-light"></i>
</span>
Facebook Icon
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-github icon-light"></i>
</span>
GitHub Icon
</p>
<p>
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
Twitter Icon
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-facebook"></i>
</span>
Facebook Icon
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-github"></i>
</span>
GitHub Icon
</p>

View file

@ -59,7 +59,7 @@
<script src="{{ site.baseurl }}assets/js/backbone.min.js"></script>
<script src="{{ site.baseurl }}assets/js/prettify.min.js"></script>
<script src="{{ site.baseurl }}assets/js/bootstrap-2.3.1.min.js"></script>
<script src="{{ site.baseurl }}assets/js/index/index.js"></script>
<script src="{{ site.baseurl }}assets/js/site.js"></script>
</body>
</html>

View file

@ -24,7 +24,7 @@
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.0.1');
src: url('../font/fontawesome-webfont.eot?v=3.1.0');
src: url('../font/FontAwesome.otf') format('opentype');
font-weight: normal;
font-style: normal;
@ -46,6 +46,11 @@
display: inline-block;
speak: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 1.3333333333333333em;
}
/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"] {
@ -82,6 +87,12 @@ ul.icons-ul > li .icon-li {
.icon-muted {
color: #eeeeee;
}
.icon-light {
color: #ffffff;
}
.icon-dark {
color: #333333;
}
.icon-border {
border: solid 1px #eeeeee;
padding: .2em .25em .15em;
@ -170,11 +181,6 @@ ul.icons-ul > li .icon-li {
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 1.3333333333333333em;
}
/* keeps Bootstrap styles with and without icons the same */
.btn [class^="icon-"],
.nav [class^="icon-"],
@ -240,6 +246,31 @@ ul.icons-ul > li .icon-li {
}
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.icon-stack {
position: relative;
display: inline-block;
text-align: center;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: -35%;
}
.icon-stack [class^="icon-"],
.icon-stack [class*=" icon-"] {
position: absolute;
width: inherit;
height: inherit;
font-size: 1em;
line-height: inherit;
}
.icon-stack .icon-stack-base {
width: inherit;
height: inherit;
font-size: 2em;
line-height: inherit;
}
/* Animated rotating icon */
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
@ -287,8 +318,8 @@ ul.icons-ul > li .icon-li {
transform: rotate(359deg);
}
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before {
content: "\f000";
}

View file

@ -32,12 +32,6 @@
background-image: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 4/3em;
}
/* keeps Bootstrap styles with and without icons the same */
.btn, .nav {
[class^="icon-"],

View file

@ -18,7 +18,13 @@
speak: none;
}
/* makes sure icons active on rollover in links */
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 4/3em;
}
/* makes sure icons active on rollover in links */
a {
[class^="icon-"],
[class*=" icon-"] {
@ -60,9 +66,9 @@ ul.icons-ul {
}
}
.icon-muted {
color: @iconMuted;
}
.icon-muted { color: @iconMuted; }
.icon-light { color: @iconLight; }
.icon-dark { color: @iconDark; }
// Icon Borders
// -------------------------

View file

@ -1,6 +1,10 @@
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.icon-stack();
/* Animated rotating icon */
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;

View file

@ -1,5 +1,5 @@
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
/* Font Awesome uses the 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"; }

View file

@ -6,3 +6,29 @@
-moz-border-radius: @radius;
border-radius: @radius;
}
.icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
.icon-stack {
position: relative;
display: inline-block;
text-align: center;
width: @width;
height: @height;
line-height: @width;
vertical-align: -35%;
[class^="icon-"],
[class*=" icon-"] {
position: absolute;
width: inherit;
height: inherit;
font-size: @top-font-size;
line-height: inherit;
}
.icon-stack-base {
width: inherit;
height: inherit;
font-size: @base-font-size;
line-height: inherit;
}
}
}

View file

@ -3,15 +3,14 @@
@font-face {
font-family: 'FontAwesome';
src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=3.0.1');
// src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
// url('@{FontAwesomePath}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
// url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
// url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=3.0.1') format('svg');
src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=@{FontAwesomeVersion}');
// src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=@{FontAwesomeVersion}') format('embedded-opentype'),
// url('@{FontAwesomePath}/fontawesome-webfont.woff?v=@{FontAwesomeVersion}') format('woff'),
// url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=@{FontAwesomeVersion}') format('truetype');
// url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=@{FontAwesomeVersion}') format('svg');
src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

View file

@ -1,6 +1,9 @@
// Variables
// --------------------------
@FontAwesomePath: "../font";
@borderColor: #eee;
@iconMuted: #eee;
@FontAwesomePath: "../font";
@FontAwesomeVersion: "3.1.0";
@borderColor: #eee;
@iconMuted: #eee;
@iconLight: #fff;
@iconDark: #333;

View file

@ -581,4 +581,12 @@ title: Font Awesome Visual Test Cases
<button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
</div>
<h3>Stacked icons</h3>
<div class="well">
{% include tests/stacked-icons.html %}
</div>
<div class="well lead">
{% include tests/stacked-icons.html %}
</div>
</div>
</section>