我想在评论文本的正下方插入多个星形图标，有什么方法可以做到吗？
我试过使用伪元素来粘贴图标，但是当需要插入多个图标时它只能插入 1 个图标。 到目前为止我已经尝试过:
.review::after {
font-family: "Font Awesome 5 Free";
font-weight: 900; content: "\f007";
}
.circle {
background-color: gray;
border-radius: 100%;
height: 80px;
width: 80px;
position: absolute;
top: -30px;
right: 245px;
}
.namedetails {
font-style: italic;
margin-bottom: 20px;
}
.review {
font-family: sans-serif;
font-size: 15px;
font-weight: bold;
}
.review::after {
font-family: "Font Awesome 5 Free";
font-weight: 900; content: "\f007";
}<div class="circle"></div>
<p class="namedetails">Name Surname</p>
<span class="review">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In dictum non consectetur a. Turpis egestas maecenas pharetra convallis posuere morbi. Mi quis hendrerit dolor magna eget est lorem ipsum. Id aliquet lectus proin nibh nisl condimentum. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor!</span>我希望 5 星图标出现在评论文本的正下方。
最佳答案
我使用 font-awesome 的最新 CDN 产生了这个结果:
我对您的代码片段所做的唯一更改是制作 .review span进入一个段落，以便在文字下方为星星留出一个小空间。如果你想要更少的空格，那么只需恢复到 <span>而不是 <p> .
i.far { margin-right: .2rem;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> SO Answer </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div class="circle"></div>
<p class="namedetails">Name Surname</p>
<p class="review">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In dictum non consectetur a. Turpis egestas maecenas pharetra convallis posuere morbi. Mi quis hendrerit dolor magna eget est lorem ipsum. Id aliquet lectus proin nibh nisl condimentum. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor!</p>
<span><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i></span>
</body>
</html>关于html - 如何插入多个图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58755706/