mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2025-01-31 07:28:26 +08:00
8923070650
Added some css that allows the user to stack icons with the class fa-stack-corner-*, where * can be nw, ne, sw or se. This would mainly be useful for adding a plus or minus sign to any existing icon. I also added some text shadow to help the corner icon be a little more legible.
58 lines
2.1 KiB
Plaintext
58 lines
2.1 KiB
Plaintext
// Stacked Icons
|
|
// -------------------------
|
|
|
|
.@{fa-css-prefix}-stack {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 2em;
|
|
height: 2em;
|
|
line-height: 2em;
|
|
vertical-align: middle;
|
|
}
|
|
.@{fa-css-prefix}-stack-1x,
|
|
.@{fa-css-prefix}-stack-2x,
|
|
.@{fa-css-prefix}-stack-corner-nw,
|
|
.@{fa-css-prefix}-stack-corner-ne,
|
|
.@{fa-css-prefix}-stack-corner-sw,
|
|
.@{fa-css-prefix}-stack-corner-se {
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
|
|
left: 0;
|
|
}
|
|
.@{fa-css-prefix}-stack-1x + .@{fa-css-prefix}-stack-corner-nw,
|
|
.@{fa-css-prefix}-stack-1x + .@{fa-css-prefix}-stack-corner-ne,
|
|
.@{fa-css-prefix}-stack-1x + .@{fa-css-prefix}-stack-corner-sw,
|
|
.@{fa-css-prefix}-stack-1x + .@{fa-css-prefix}-stack-corner-se {
|
|
font-size: 0.5em;
|
|
}
|
|
.@{fa-css-prefix}-stack-2x + .@{fa-css-prefix}-stack-corner-nw,
|
|
.@{fa-css-prefix}-stack-2x + .@{fa-css-prefix}-stack-corner-ne,
|
|
.@{fa-css-prefix}-stack-2x + .@{fa-css-prefix}-stack-corner-sw,
|
|
.@{fa-css-prefix}-stack-2x + .@{fa-css-prefix}-stack-corner-se {
|
|
font-size: 1em;
|
|
}
|
|
.@{fa-css-prefix}-stack-corner-se,
|
|
.@{fa-css-prefix}-stack-corner-sw,
|
|
.@{fa-css-prefix}-stack-corner-ne,
|
|
.@{fa-css-prefix}-stack-corner-nw,
|
|
.@{fa-css-prefix}-inverse + .@{fa-css-prefix}-stack-corner-se,
|
|
.@{fa-css-prefix}-inverse + .@{fa-css-prefix}-stack-corner-sw,
|
|
.@{fa-css-prefix}-inverse + .@{fa-css-prefix}-stack-corner-ne,
|
|
.@{fa-css-prefix}-inverse + .@{fa-css-prefix}-stack-corner-nw { text-shadow: 0 0 3px #fff; }
|
|
|
|
.@{fa-css-prefix}-inverse.@{fa-css-prefix}-stack-corner-se,
|
|
.@{fa-css-prefix}-inverse.@{fa-css-prefix}-stack-corner-sw,
|
|
.@{fa-css-prefix}-inverse.@{fa-css-prefix}-stack-corner-ne,
|
|
.@{fa-css-prefix}-inverse.@{fa-css-prefix}-stack-corner-nw { text-shadow: 0 0 3px #000; }
|
|
|
|
.@{fa-css-prefix}-stack-1x { line-height: inherit; }
|
|
.@{fa-css-prefix}-stack-2x { font-size: 2em; }
|
|
.@{fa-css-prefix}-stack-corner-se { bottom: 1em; right: 0.5em; }
|
|
.@{fa-css-prefix}-stack-corner-sw { bottom: 1em; left: 0.5em; }
|
|
.@{fa-css-prefix}-stack-corner-ne { top: 1em; right: 0.5em; }
|
|
.@{fa-css-prefix}-stack-corner-nw { top: 1em; left: 0.5em; }
|
|
.@{fa-css-prefix}-inverse { color: @fa-inverse; }
|