How to Add Graphical Quotation Marks inside Blockquotes

I would love to know how you made quotation marks frame the text within your blockquotes.
Kelly

Hi Kelly!

There are several ways to do this. You could use multiple background images, but I personally use Font Awesome icons. To get started, read my guide on how to add font icons to WordPress. This will instruct you on how to include the Font Awesome library on your blog.

Once you have that set up, it’s just a matter of CSS. Here’s the core part:

blockquote {
    position:relative;
    padding:10px 45px;
}
blockquote:before, blockquote:after {
    color:#EBB1B2;
    content:'\f10d';
    font-family:'FontAwesome';
    font-size:30px;
    position:absolute;
    top:5px;
    left:8px;
    display:block;
}
blockquote:after {
    content:'\f10e';
    bottom:0;
    right:8px;
    top:auto;
    left:auto;
}

The key thing here is the :before and after part of the CSS. Each icon in Font Awesome is a font—so it’s a letter. And each letter has a unicode value associated with it. So if you view the quote icon entry you can see that the unicode value is f10d. So we basically have the CSS add the content \f10d before the blockquote. But then we position it absolutely to be where we want (I wanted it 5 pixels from the top, and 8 pixels from the left).

Then we perform similar actions for after the blockquote (using the other quote icon, which has a different value).

This same method can be used to add any other icon in the Font Awesome library!

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

18 comments

  1. Good tip! I’m doing massive efforts to keep from pimping out zounds of blockquote types, lol. Now I wanna pimp them out all the more, le sigh.

    Also: your theme. I mean, you should be ashamed of yourself for having such a freaking magnificently awesomesauce design!! I’m in love with the girl&butterflies!!

    Livia @ Butterfly-o-Meter Books recently posted: Circus Escape by Lilliana Rose
    1. Where are you pasting it? In Tweak Me’s CSS or Jetpack’s Custom CSS module? Whichever one you’re putting it in, try the other. 😛

  2. I know this is a super old post but I’m using two different styles of blockquote, the original (that is edited on Tweak Me V2 options and other I created myself (this one^^) This this the CSS tag that I created it under: blockquote.ubb-quotes {

    Now that I’ve added this code, the left quote icon appears next to my post title and I’m not sure why.

    Erika recently posted: Playlist: Mellow Pop Mornings
    1. I can see in your code that you have this:

      blockquote.ubb-quotes:before, blockquote:after {
      /* CSS in here */
      }

      So for that second entry, you forgot to add the .ubb-quotes class. So the quote is being added to normal blockquotes. But then ultimately the problem with it being way up by your post title is because you didn’t have this:

      blockquote {
      position: relative;
      }

      Presumably you have that added to blockquote.ubb-quotes which is fine. It was just a problem since you didn’t edit that one line to add the class name.

      Does that make sense? XD The main takeaway is you need to edit your code to add the class name to that one line.

  3. Hey!
    Thank you for this great tutorial, it helped me a lot!

    I know that this post is quite old, but maybe you look into old posts’ comments from time to time…
    I centered the quotation marks over and under the blockquote. Now, I’m wondering if there is a way to create a horizontal line on the left and right of each quotation mark? So it looks something like this:

    ———— quotation mark ————
    Text
    ———— quotation mark ————

    Since I couldn’t find a fitting tutorial, I tried it on my own by using a border, but it doesn’t work. Maybe you have an idea how to create something like that?

    xoxo Sarah

Recent Posts

    Random Posts