How do I override Bootstrap's <blockquote> border-left with a FontAwesome icon in CSS?

Question

When a <blockquote> appears within my div, I would like to override it so that it uses FontAwesome's icon-quote-left as opposed to the border-left: 5px rgb.... value it uses now.

How can I do this using just CSS?

I don't want to use JS - because it adds too much load to the page.

Answer 1

You can do this with a CSS Pseudo element. Here's a JSFiddle to demonstrate: http://jsfiddle.net/cvADH/

/* Override the bootstrap style */
blockquote {
    border-left: none;
}

/* Insert the pseudo element - replicating what FontAwesome does */
blockquote:before {
    content: "\f10d"; 
    font-family: FontAwesome;
    float: left;
    margin-right: 10px;
}