Search code examples
htmlcssreactjstwitter-bootstrapfont-awesome

Why don't all Font Awesome icons work with boostrapCDN?


From my understanding, all Font Awesome icons should work with linking this bootstrap stylesheet. But, I just got that one .fa fa-deskto to work, others do not display, the second one for example is: https://fontawesome.com/icons/bath?f=classic&s=solid

Both icons are also free, but it isn't working.

Sandbox

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>


Solution

  • Because the provided link does not have the styles for fa-bath it must have been added in a later version, please find below link with the latest version where it works fine!

    <!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>