How can I add a FontAwesome character to the beginning of all blockquotes?

Question

I am using FontAwesome. Right now I have a blockquote which has an image in front of it that shows its a quote mark.

blockquote {
    background-image: url("./styles/roman/imageset/forum/quote.gif");
    background-attachment: scroll;
    background-position: 6px 8px;
    background-repeat: no-repeat;
    border-color: #dbdbce;
    border: 1px solid #dbdbdb;
    font-size: 0.95em;
    margin: 0.5em 1px 0 25px;
    overflow: hidden;
    padding: 5px;
}

FontAwesome has a quote mark in their font, I was wondering if there is a way to change it from currently being a background to just showing the character. I did not know if using content and a font type would work.

Example

["] This is a quote for whatever magazine.

where ["] is currently the quote image.

Daniel Higueras · Accepted Answer · 2016-01-25T22:11:23.403

8

You can use the CSS pseudo-selector ::before.

For your example you would use:

blockquote::before {
  content: '\"';
}

For further reference, see here.

If you wish to include the icon from the FontAwesome library, you can try with the following:

blockquote::before {
  font-family: FontAwesome;
  content: '\f10d'; /*quote left icon*/
}

edited Jan 25 '16 at 22:11

answered Jan 25 '16 at 22:03

Daniel Higueras

2,404
22
34

2

You are the only person that answered the question. All other answers are incorrect. – Case Jan 25 '16 at 22:52
1

Use `font-family: 'Font Awesome 5 Free'` for Font Awesome 5 – Andre Pena Apr 21 '19 at 18:45

Oriol · Answer 2 · 2016-01-25T23:10:22.763

2

You can use a ::before pseudo-element with content: open-quote to insert an opening quote, and an ::after one with content: no-close-quote to decrement the quote nesting level without displaying any quote.

If you want to customize the quotation marks, use the quotes property. According to A list of Font Awesome icons, fa-quote-left is \f10d and fa-quote-right is \f10e.

Finally, to display that character using in the appropriate font, use font-family: FontAwesome.

blockquote { quotes: "\f10d" "\f10e" '“' '”' "‘" "’"; }
blockquote::before { content: open-quote; font-family: FontAwesome; }
blockquote::after  { content: no-close-quote; }

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<blockquote>
  Hello world!
  <blockquote>Foo bar<blockquote>Baz</blockquote></blockquote>
</blockquote>

edited Jan 25 '16 at 23:10

answered Jan 25 '16 at 22:06

Oriol

274,082
63
437
513

As the question was specifically asking about Font Awesome, this is not possible. http://stackoverflow.com/questions/22511499/add-html-tag-inside-css-content-property – Case Jan 25 '16 at 22:50
@Iscariot You can't insert HTML with CSS, but I think Font Awesome inserts a custom font and you might be able to set the appropriate `font-family` to use that font. I don't have much idea about Font Awesome, thought. – Oriol Jan 25 '16 at 22:54
@TylerH I meant you can't insert HTML elements. With `content` you can only generate text or external resources. – Oriol Jan 26 '16 at 16:25

score 0 · Answer 3 · answered Jan 25 '16 at 22:03

0

You can try using something like the CSS ::before pseudo selector:

blockquote::before {
   content: "\"";
}

That will insert a single quote mark before the blockquote element. (Note the escape mark.)

If you wanted to display an image, you might use this:

blockquote::before {
   content: '<img src="./styles/roman/imageset/forum/quote.gif" class="quotemark"/>';
}

img.quotemark {
  /* Style the image here. */
}

answered Jan 25 '16 at 22:03

Moshe

57,511
78
272
425

As the question was specifically asking about Font Awesome, this is not possible. http://stackoverflow.com/questions/22511499/add-html-tag-inside-css-content-property – Case Jan 25 '16 at 22:50

How can I add a FontAwesome character to the beginning of all blockquotes?

3 Answers3