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!
I was so wondering this too so thanks for sharing.
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!!
Bahaha, thanks Livia! 😀
My theme is so screwy that every h + number I try change things on the static page too.*headdesk*
Quick question for you Ashley – this works great, but every now and then (and seemingly randomly, though probably not) in the code the “\” disappears from in front of the content:’\f10d’; and it messes up the quotation marks. Any idea what’s happening and how to stop it? Thanks!
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. 😛
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.
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-quotesclass. 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-quoteswhich 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.
That does make sense! And thank you, that worked perfectly.
Lovely post! I still need to ask for help. I am using blogger and not sure how I can apply your tutorial. Can you please help?
thank you so much,
Sophia, xoxo
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
You’re a lifesaver! I was wondering what happened to my blockquote after I minified my CSS as it has appeared into f10d on my website. Thank you!
Thanks so much!