Archived topic
Blockquote Symbol “ Before Quote
11 replies · Started by Guilherme Lacerda on July 16, 2020
Hi!
How can i add the Blockquote Symbol “ Before Quote?
Example:

Hi there,
try this CSS:
blockquote {
position: relative;
padding-top: 70px;
}
blockquote:before {
content: "\201d";
font-family: symbol;
font-size: 120px;
font-style: normal;
position: absolute;
top: 0;
left: 20px;
color: #01b1cd;
}
Don't worked. =(
Can you disable the SG Optimizer so i can see whats conflicting.
Ok. Disabled. =)
In your CSS you need to include:
blockquote {
border-left: 5px solid #01b1cd;
background-color: #1a1a1a;
color: #ffffff;
border-radius: 1px;
/* Add the following properties */
position: relative;
padding-top: 70px;
}
Need some fixes, check it:

The code:

Hmmm... not seeing it on my browsers - but those HTML symbols are a pain.
Do you have an image of the quote symbol we could add in its place?
Hmmm… not seeing it on my browsers – but those HTML symbols are a pain.
Do you have an image of the quote symbol we could add in its place?
SVG FILE
https://marketingconteudo.com/wp-content/uploads/2020/07/writer.svg
PNG FILE
https://marketingconteudo.com/wp-content/uploads/2020/07/writer.png
I prefer the svg file. :)
Thanks a lot for the help.
Try this:
blockquote {
border-left: 5px solid #01b1cd;
background-color: #1a1a1a;
color: #ffffff;
border-radius: 1px;
padding-top: 50px;
}
blockquote:before {
content: '';
display: block;
width: 40px;
height: 40px;
background-image: url( https://marketingconteudo.com/wp-content/uploads/2020/07/writer.svg);
background-size: contain;
margin-top: 10px;
}
THANKS! WORKS. =)

I changed the style to a minimal design:

Thanks again.
Awesome - looks great :)