部分引用未出现在 html/css 中
Part of a quote is not appearing in html/css
我想在我的项目中包含一个引述,这是一个看起来很时尚的引述,它有一个巨大的引述,并且不透明。问题是我让报价的其他所有内容都像文本和其他元素一样出现,但我无法让引号出现,我不知道为什么。你们能帮忙吗?
我从 (CodePen) 获得全部代码的地方:https://codepen.io/jimmycow/pen/LmjVaz
但是当我在其他任何地方 运行 时,引号不会出现,而其他所有内容都会出现。例如,如果我尝试 运行 Whosebug 上的代码:
.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: "1C";
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>
从输出中可以看到,引号没有出现,但是当你点击我发给你的上面的link for CodePen时,引号就在那里。好像是什么问题?
你想要的引号是Font Awesome css的输出。要显示,请连接此 link:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
我想在我的项目中包含一个引述,这是一个看起来很时尚的引述,它有一个巨大的引述,并且不透明。问题是我让报价的其他所有内容都像文本和其他元素一样出现,但我无法让引号出现,我不知道为什么。你们能帮忙吗?
我从 (CodePen) 获得全部代码的地方:https://codepen.io/jimmycow/pen/LmjVaz
但是当我在其他任何地方 运行 时,引号不会出现,而其他所有内容都会出现。例如,如果我尝试 运行 Whosebug 上的代码:
.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: "1C";
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>
从输出中可以看到,引号没有出现,但是当你点击我发给你的上面的link for CodePen时,引号就在那里。好像是什么问题?
你想要的引号是Font Awesome css的输出。要显示,请连接此 link:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">