The quotes you want is the output of Font Awesome css. To display, connect this link:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Solution 1 :
Problem :
I want to include a quote into my project and it is a stylish looking quote that has a huge quotation with less opacity. The problem is I got everything else of the quote to appear like the text and other elements, but I cannot get the quotation mark to appear, I do not know why. Can you guys please help?
where I got the whole code from (CodePen): https://codepen.io/jimmycow/pen/LmjVaz
But when I run it anywhere else, the quotation mark does not appear and everything else does. For example, if I try to run the code even here at StackOverFlow:
.blockquote {
padding: 60px 80px 40px;
position: relative;
}
.blockquote p {
font-family: "Utopia-italic";
font-size: 35px;
font-weight: 700px;
text-align: center;
}
/*blockquote p::before {
content: "f095";
font-family: FontAwesome;
display: inline-block;
padding-right: 6px;
vertical-align: middle;
font-size: 180px;
}*/
.blockquote:before {
position: absolute;
font-family: 'FontAwesome';
top: 0;
content:"f10d";
font-size: 200px;
color: rgba(0,0,0,0.1);
}
.blockquote::after {
content: "";
top: 20px;
left: 50%;
margin-left: -100px;
position: absolute;
border-bottom: 3px solid #bf0024;
height: 3px;
width: 200px;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
.otro-blockquote{
font-size: 1.4em;
width:60%;
margin:50px auto;
font-family:Open Sans;
font-style:italic;
color: #555555;
padding:1.2em 30px 1.2em 75px;
border-left:8px solid #78C0A8 ;
line-height:1.6;
position: relative;
background:#EDEDED;
}
.otro-blockquote::before{
font-family:Arial;
content: "201C";
color:#78C0A8;
font-size:4em;
position: absolute;
left: 10px;
top:-10px;
}
.otro-blockquote::after{
content: '';
}
.otro-blockquote span{
display:block;
color:#333333;
font-style: normal;
font-weight: bold;
margin-top:1em;
}<blockquote class="blockquote"><p>Morales ha convertido la ya dúctil democracia boliviana en una plastilina con la que sus manos juegan a su antojo.</p></blockquote>
<br />
<blockquote class="otro-blockquote">
Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn't really do it, they just saw something. It seemed obvious to them after a while. That's because they were able to connect experiences they've had and synthesize new things.
<span>Steve Jobs</span>
</blockquote>As you can see from the output, the quotation mark does not appear but when you click on the above link for CodePen I sent you, the quotation mark is there. What seems to be the problem?
Comments
Comment posted by s.kuznetsov
@sidekick12, I can’t see the file structure of your site, and it happens that the site has several head templates. But if you have only one template for the main page, then it is enough to connect it to this template.