如何在html中添加图标

Question

如何在 html 和 css 中添加图标？ 我的作业需要这个，它需要文本旁边的图标，所以我尝试添加图标并观看教程，但我无法理解它们 之前 像这样（之后）

你们能帮忙解释一下它是如何工作的吗，我读了很多教程，但我无法理解，你们能为我解释更多细节吗

Answer 1

使用 Font Awesome，您可以在需要图标的任何位置添加

<i>

标签，并且

class

标识您要使用的图标。请注意，此 Font Awesome 的 CDN 发行版仅包含免费图标。

div {
  display: inline-block;
  padding: 1em;
  margin: 1em;
  border: 1px solid black;
  border-radius: 5px;
}
i {
  margin-right: 5px;
}

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<div><i class="fa-solid fa-user"></i> Users</div>
<div><i class="fa-solid fa-file"></i> Documents</div>

如果您有包含图标的图像（例如 PNG 或 SVG 文件），则可以使用

<img>

标签来引用它们。

div {
  display: inline-block;
  padding: 1em;
  margin: 1em;
  border: 1px solid black;
  border-radius: 5px;
}

img {
  margin-right: 5px;
  vertical-align: middle;
}

<div><img src="http://picsum.photos/id/151/20"> Users</div>
<div><img src="http://picsum.photos/id/152/20"> Documents</div>