时间戳

首页 > 解决方案 > 部分报价未出现在 html/css 中

javascript - 部分报价未出现在 html/css 中

问题描述

我想在我的项目中包含一个报价，这是一个外观时尚的报价，报价很大且不透明。问题是我让引号的其他所有内容都像文本和其他元素一样出现，但我无法让引号出现，我不知道为什么。你们能帮忙吗？

我从（CodePen）获得了整个代码：https ://codepen.io/jimmycow/pen/LmjVaz

但是当我在其他任何地方运行它时，引号不会出现，而其他一切都会出现。例如，如果我尝试在 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>

从输出中可以看出，引号没有出现，但是当您单击上面我发送给您的 CodePen 链接时，引号就在那里。似乎是什么问题？

标签： javascripthtmlcsswebweb-deployment

解决方案

你想要的引号是Font Awesome css 的输出。要显示，请连接此链接：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

推荐阅读