部分引用未出现在 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">