html - 如何插入多个图标？-6ren

html - 如何插入多个图标？

转载作者：太空宇宙更新时间：2023-11-04 00:38:51

26

4

我想在评论文本的正下方插入多个星形图标，有什么方法可以做到吗？

我试过使用伪元素来粘贴图标，但是当需要插入多个图标时它只能插入 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/

26

4

0

文章推荐： python - 使用 Matplotlib.image 自定义颜色图

文章推荐： node.js - 如何在nodejs中对第三方代码进行单元测试？

文章推荐： Node.js + Express - 在客户端检索服务器端数据

文章推荐： html - 过渡持续时间在特定的 div 中不起作用

css - 图标(fontawesome， Material 图标)闪烁!/？问题
我从来没有遇到过这种问题 - 我也不知道为什么.. 有些图标丢失并以“?/!”闪烁显示发生了什么事？它是一个提交按钮。我在另一个按钮中有相同的图标 - 那里没问题。 SIGN! 有什
javascript - 如何使用 ng-click 功能显示 ionic 图标(fa 图标)？
我只需要在单击按钮时显示 ionic 图标。我试着在那个图标上放一个类并做到了: .icn { visibility: visible; } 但是没有用，有没有人知道另一种方法？最佳答案 Sho
托盘中的c++图标
我用qt在托盘里做了一个应用。在我的电脑上，这是一个很好的项目，我在托盘栏中看到了图标，但是当我将其发布给其他人时，他们看不到该图标，它只是一个可以使用但不显示图标的隐形方 block 。但在我的电脑
delphi - 如何在Delphi的TListView子项上绘制bmp/图标？
我想使用delphi将图标/ bmp绘制到TListView的子项中。但是我不知道该怎么做到。它适用于列表中的第一项，但子项存在问题。最佳答案您可以使用CustomDrawSubItem事件。下
标题栏中的 cocoa 图标
我想将标题栏中的图标设置为应用程序的图标 [[myWindow standardWindowButton:NSWindowDocumentIconButton] setImage:[NSApp app
所有应用程序窗口的 WPF 图标
可以设置一个图标，以便在当前应用程序的每个窗口上使用它。这样我就设置了一次(不是手动在每个窗口上设置)..？最佳答案关于这个主题的一个很好的引用在这里 MSDN 。表明您有一个应用程序图标(桌面图
browser - 当书签拖到工具栏时如何设置图标/图标？
我为自己制作了一个小书签，它的功能很好，但当添加到 Opera 或 Firefox 的工具栏时，它只是呈现浏览器的默认书签图标(分别是地球仪和星星)。我的网站有一个网站图标，窗口、选项卡甚至 [网站]
javascript - 更改responsiveCollapse模型中的默认+/-图标
制表符中的responsiveCollapse 折叠展开功能的默认图标似乎未居中。是否有更改此图标的选项。也许是右下胡萝卜？最佳答案 responsiveCollapse 格式化程序只是一个像所有其
javascript - 单击列表时显示所有数据以及图像/图标
上面是下拉列表，当单击列表时，其值将与图像一起显示在上面的字段(顺便说一句，这是一个按钮)中。我已经实现了显示文本，但似乎无法显示图像。这是我的标记如下... 广东 @foreach
每个航路点上的 KML 图标
我想将我们数据库中的电线杆和电缆导出到 Google 地球的 KML 文件中。对于每个节点，我们都有一个极阵列，电缆始终连接到阵列中的下一个极。制作简单路径的导出似乎很容易。但是这些路径只是显示一
每个航路点上的 KML 图标
我想将我们数据库中的电线杆和电缆导出到 Google 地球的 KML 文件中。对于每个节点，我们都有一个极阵列，电缆始终连接到阵列中的下一个极。制作简单路径的导出似乎很容易。但是这些路径只是显示一
Java JComboBox 图标
在 JTable 中显示数据。一列用作字段复选框。问题是在显示ChceckBox 中而不是出现图标true/false。我该如何解决这个问题？添加数据: private DefaultTableMo
c# - 在DataGridView中使用DataTable显示小图(图标)
[编辑] 我想使用 DataTable 在 Datagridview 中使用图像。 RadioButton 只是这篇文章的一种简单问题格式。让我为此澄清一下。如何使用绑定(bind)样式在 dat
c# - 如何为组合框中的每个项目添加图像/图标？
我正在使用 C# 开发 win 表单应用程序。我遇到了一个需要向用户提供 ComboBox 的场景。现在，为了使外观更具吸引力，我想在该组合框的每个项目之前显示一个小图像或图标。我查看了一些提供此功
JavaScript 序列化图像(图标)
我正在 CrossRider 中构建一个扩展。我需要在数据库中保存我有它们的 url 的图像/图标。它们是微小的图像，不会成为数据库中的问题。我可能有类似的东西可以访问 background.js:
JavaFX 如何在不损失质量的情况下使用和缩放图像/图标？
我需要使用我的 JavaFX 应用程序中的一些元素，这些元素使用带有自定义符号/图标的按钮横幅或背景图像。此应用程序应该在具有不同屏幕分辨率的多个设备上运行，并且我还(最终)需要缩放图像/图标(
导航栏中的 Android 图标
我怎样才能在 android studio 中做这样的事情: 我想要一个导航栏，您可以在其中看到名称、图标以及打开抽屉导航的机会 :D (图片是用Figma制作的) 最佳答案将重力设置为在 Draw
android - 更改操作栏的按钮状态(图标)
当我在 ViewPager 中滑动 fragment 时，如何动态更改 Action Bar 的操作按钮图标。取决于 fragment 按钮必须改变状态(图标)。最佳答案您可以在 onPrepar
php - 显示多行(WHILE)图标
我有两个 while 循环，一个是循环遍历聊天日志以检索日期、用户名、消息，另一个 while 循环是从单独的表中检索图标这有两列 chars 和 image (image-name.*) 我可以显
系统偏好设置面板中缺少 MySql 图标
我正在尝试重新启动 mysql(一个完全不同的问题)，MySql 肯定已安装(版本 14.14)，并且根据我收集的信息，我应该在系统偏好设置面板的底部看到它的图标，但它是不在那里。安装过程中是否出现了

首页

博学

6Ren·AI

商城

html - 如何插入多个图标？