mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2024-12-26 13:31:31 +08:00
resolving #704
This commit is contained in:
parent
b4a346246a
commit
86e31c972d
51
build/_includes/tests/stacked-icons.html
Normal file
51
build/_includes/tests/stacked-icons.html
Normal 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>
|
@ -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>
|
||||
|
47
build/assets/font-awesome/css/font-awesome.css
vendored
47
build/assets/font-awesome/css/font-awesome.css
vendored
@ -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";
|
||||
}
|
||||
|
Binary file not shown.
@ -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-"],
|
||||
|
14
build/assets/font-awesome/less/core.less
vendored
14
build/assets/font-awesome/less/core.less
vendored
@ -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
|
||||
// -------------------------
|
||||
|
4
build/assets/font-awesome/less/extras.less
vendored
4
build/assets/font-awesome/less/extras.less
vendored
@ -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;
|
||||
|
4
build/assets/font-awesome/less/icons.less
vendored
4
build/assets/font-awesome/less/icons.less
vendored
@ -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"; }
|
||||
|
26
build/assets/font-awesome/less/mixins.less
vendored
26
build/assets/font-awesome/less/mixins.less
vendored
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
11
build/assets/font-awesome/less/path.less
vendored
11
build/assets/font-awesome/less/path.less
vendored
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user