Question

标题几乎解释了它。我会把代码放在这里。

Users

顺便提一下段落

Answer 1

＆＃13;

.para {
  position: relative;
  padding: 10px 45px;
}

.para:before,
blockquote:after {
  color: #EBB1B2;
  content: '\f10d';
  font-family: 'FontAwesome';
  font-size: 20px;
  position: absolute;
  top: 5px;
  left: 8px;
  display: block;
}

.para:after {
  color: #EBB1B2;
  content: '\f10e';
  font-family: 'FontAwesome';
  font-size: 20px;
  bottom: 0;
  right: 8px;
  top: auto;
  left: auto; 
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-8 col-xs-offset-2">
  <p class="para">text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here
    text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here
    text here text here text here text here text here text here text text here text here &nbsp;&nbsp;</p>
</div>

＆＃13;

Answer 2

有多种方法可以做到这一点：

将i标记放在p标记

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<p><i class="fa fa-quote-left" aria-hidden="true"></i>text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here <i class="fa fa-quote-right" aria-hidden="true"></i></p>

或使用CSS来设置html的样式

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p{
display: inline;
}
</style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>

<div class="col-xs-4 col-xs-offset-4">
<i class="fa fa-quote-left" aria-hidden="true"></i><p>text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here</p> <i class="fa fa-quote-right" aria-hidden="true"></i>
</div>

</body>
</html>

如何将Font Awesome图标粘贴到段落的末尾而不是它下面

2 个答案: