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.

Solution

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

Comments

[marcamillion]

I would love to see some code on how to achieve this. I know the theory, it's just the syntax and actually doing it - I am dumbfounded by :)

[Robert Hoffmann]

No PC at hand so no examples.. But look up 320up framework, I know they did a drop in replacement of bootstrap icons in favor of font awesome ones. Maybe looking at their code will help you out

[marcamillion]

What is the \f10d? Where did you get that from?

[marcamillion]

Oh that's the CSS content value for that particular icon - astronautweb.co/snippet/font-awesome - awesome. Thanks. This is just what I wanted!

[Robert Hoffmann]

update with links to examples, the rest should be easy :) ..long version short: download bootstrap, replace sprite.less with font-awesome.less ..rebuild, enjoy.

[qwertzman]

and how can we do it on the blockquote with pull-right please?

[Mario Awad]

@qwertzman with the following mirrored code from the pull-left specified above: blockquote:after { content: "\f10e"; font-family: FontAwesome; float: right; margin-left: 10px; }