Html 为什么不是所有字体好的图标都能与boostRapCDN一起使用呢

发布于01月09日

据我所知，所有的Font Awesome图标都应该与这个 bootstrap 程序样式表链接.但是，我只是得到了一个.fa fa-deskto工作，其他人不显示，第二个例如是: https://fontawesome.com/icons/bath?f=classic&s=solid

这两个图标也都是免费的，但它不起作用.

Sandbox个

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <div>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
    <div className="icon">
      <i class="fa fa-desktop"></i>
      <i class="fa-solid fa-bath"></i>
    </div>
  </div>
</body>

推荐答案

因为提供的链接没有fa-bath的样式，它必须是在较新的版本中添加的，请在下面找到与最新版本的链接，它工作得很好！

<!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>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
      <div className="icon">
        <i class="fa fa-desktop"></i>
        <i class="fa-solid fa-bath"></i>
      </div>
    </div>
  </body>
</html>