为什么不是所有 Font Awesome 图标都可以与 boostrapCDN 一起使用？

问题描述 投票：0回答：2

根据我的理解，所有 Font Awesome 图标都应该与链接此引导样式表一起使用。但是，我刚刚让一个 .fa fa-deskto 可以工作，其他的不显示，例如第二个是： https://fontawesome.com/icons/bath?f=classic&s=solid

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

沙盒

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

html css reactjs twitter-bootstrap font-awesome
2个回答
0
投票

图标可能在“https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”中不可用

尝试使用“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css”

fas fa-bath
0
投票

因为提供的链接没有

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 fa-bath"></i>
      </div>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.