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/backbone.min.js"></script>
<script src="{{ site.baseurl }}assets/js/prettify.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/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> </body>
</html> </html>

View File

@ -24,7 +24,7 @@
* -------------------------- */ * -------------------------- */
@font-face { @font-face {
font-family: 'FontAwesome'; 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'); src: url('../font/FontAwesome.otf') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -46,6 +46,11 @@
display: inline-block; display: inline-block;
speak: none; 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 */ /* makes sure icons active on rollover in links */
a [class^="icon-"], a [class^="icon-"],
a [class*=" icon-"] { a [class*=" icon-"] {
@ -82,6 +87,12 @@ ul.icons-ul > li .icon-li {
.icon-muted { .icon-muted {
color: #eeeeee; color: #eeeeee;
} }
.icon-light {
color: #ffffff;
}
.icon-dark {
color: #333333;
}
.icon-border { .icon-border {
border: solid 1px #eeeeee; border: solid 1px #eeeeee;
padding: .2em .25em .15em; padding: .2em .25em .15em;
@ -170,11 +181,6 @@ ul.icons-ul > li .icon-li {
.dropdown-submenu:hover > a > [class*=" icon-"] { .dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none; 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 */ /* keeps Bootstrap styles with and without icons the same */
.btn [class^="icon-"], .btn [class^="icon-"],
.nav [class^="icon-"], .nav [class^="icon-"],
@ -240,6 +246,31 @@ ul.icons-ul > li .icon-li {
} }
/* EXTRAS /* 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 { .icon-spin {
display: inline-block; display: inline-block;
-moz-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear;

View File

@ -32,12 +32,6 @@
background-image: none; 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 */ /* keeps Bootstrap styles with and without icons the same */
.btn, .nav { .btn, .nav {
[class^="icon-"], [class^="icon-"],

View File

@ -18,7 +18,13 @@
speak: none; 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 { a {
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
@ -60,9 +66,9 @@ ul.icons-ul {
} }
} }
.icon-muted { .icon-muted { color: @iconMuted; }
color: @iconMuted; .icon-light { color: @iconLight; }
} .icon-dark { color: @iconDark; }
// Icon Borders // Icon Borders
// ------------------------- // -------------------------

View File

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

View File

@ -6,3 +6,29 @@
-moz-border-radius: @radius; -moz-border-radius: @radius;
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-face {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=3.0.1'); src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=@{FontAwesomeVersion}');
// src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), // src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=@{FontAwesomeVersion}') format('embedded-opentype'),
// url('@{FontAwesomePath}/fontawesome-webfont.woff?v=3.0.1') format('woff'), // url('@{FontAwesomePath}/fontawesome-webfont.woff?v=@{FontAwesomeVersion}') format('woff'),
// url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); // url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=@{FontAwesomeVersion}') format('truetype');
// url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=3.0.1') format('svg'); // url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=@{FontAwesomeVersion}') format('svg');
src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype'); src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

View File

@ -2,5 +2,8 @@
// -------------------------- // --------------------------
@FontAwesomePath: "../font"; @FontAwesomePath: "../font";
@FontAwesomeVersion: "3.1.0";
@borderColor: #eee; @borderColor: #eee;
@iconMuted: #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> <button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
</div> </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> </section>