changed icon mixin to icon-full, added icon-lite mixin and .icon base class

This commit is contained in:
tquensen 2012-03-08 23:37:11 +01:00
parent 5ecbb6f2d1
commit 8c481a4ba2

View File

@ -63,8 +63,19 @@ li[class*=" icon-"] {
}
}
//.icon mixin, adds an icon to any css selector
.icon(@type, @size: 1, @color: inherit, @margin: 0.2em) {
//.icon base class to use with .icon-lite() mixin
.icon {
&:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
vertical-align: middle;
text-align: center;
}
}
//.icon-full mixin, adds an icon to any css selector
.icon-full(@type, @size: 1, @color: inherit, @margin: 0.2em) {
&:before {
font-family: FontAwesome;
font-weight: normal;
@ -81,6 +92,16 @@ li[class*=" icon-"] {
color: @color;
}
}
//.icon-lite mixin, like .icon-full(), but less code and requires .icon class on all html elements that use it
.icon-lite(@type, @size: 1, @color: inherit, @margin: 0.2em) {
&:before {
margin-right: @margin;
content: @type;
font-size: @size * 1em;
line-height: 1em / @size;
color: @color;
}
}
// Uses Unicode Private Use Area (PUA) to ensure screen readers do not read off
// random characters that represent icons