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;

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,6 +18,12 @@
speak: none;
}
/* 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-"],
@ -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

@ -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

@ -2,5 +2,8 @@
// --------------------------
@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>