Font-Awesome/less/stacked.less
Jake Franklin 8923070650 Added support for fa-stack-corner-* icons
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.
2014-04-17 11:40:56 -07:00

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; }