Quote Style with Font Awesome
I was playing around with quote block styling and figured out how to add font awesome as a pseudo. I'd imagine this is obvious to you css masters but figured I'd share.
div[class^="quoteheader"]:before, div[class^="quoteheader"]:after {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
color: #e2e2e2;
font-size: 1.5em;
}
That applys the FontAwesome font to the before and after pseduo's on classes that start with quoteheader
.quoteheader::before {
content: "\f10e";
float: right;
transform: rotate(-30deg);
}
.quoteheader::after {
content: "\f10d\00a0\00a0";
float:right;
transform: rotate(-30deg);
}
Thats just a demo, it adds the right and left quote symbols and rotates them as an example of things you can do.