html 元素不可见。它在那里，但它的尺寸为 0x18

Question

我有三个标签，我从 font awesome 得到的。每个都包含一个图标。它们在用户单击按钮时显示。但是，最后一个是不可见的。当我使用 inspect 时，我可以看到它在那里，但它的尺寸为 0x18。我该如何解决这个问题，以便用户可以在 her/his 屏幕上看到它？

const name = document.getElementById("name");
const image = document.getElementById("image");
var personPaying = ""
const btn = document.getElementById("btn");
const people = ["pierre", "paul", "jacques", "henry" ];
const date = new Date().getDay();
const daysOfWeek = Array.from({length: 7}, (item, i) => {
  return new Date(0,0,i).toLocaleDateString("en-US", {weekday: "long"})
})
var today = daysOfWeek[date];
var names = {
  "Monday": "emilie",
  "Tuesday": "emilie",
  "Wednesday": "jessica",
  "Thursday": "jessica",
  "Friday": "paul",
  "Saturday": "paul",
  "Sunday": "pierre",
}
btn.addEventListener("click", function() {
  date >= 0 && date < 2 ? personPaying = `today is ${today} so ${names[today]} is footing the bill`
  : date >= 2 && date < 4 ? personPaying = `today is ${today} ${names[today]} is paying`
  : date >= 4 && date < 6 ?   personPaying = `Hi ${names[today]}, today is ${today} so although we are in Amsterdam we're not going ducth`
  : personPaying = `Hi ${names[today]}, today is ${today}, your turn to pay today`
  name.textContent = personPaying;
  image.src = `picture/${names[today]}.png`;
  image.alt = "picture of an avatar";
  var unseen = document.getElementsByClassName("unseen");
  var unseenArray = [...unseen]
  unseenArray.map(x => x.style.display = "inline");
}, false);

const name = document.getElementById("name");
const image = document.getElementById("image");
var personPaying = ""
const btn = document.getElementById("btn");
const people = ["pierre", "paul", "jacques", "henry" ];
const date = new Date().getDay();
const daysOfWeek = Array.from({length: 7}, (item, i) => {
  return new Date(0,0,i).toLocaleDateString("en-US", {weekday: "long"})
})
var today = daysOfWeek[date];
var names = {
  "Monday": "emilie",
  "Tuesday": "emilie",
  "Wednesday": "jessica",
  "Thursday": "jessica",
  "Friday": "paul",
  "Saturday": "paul",
  "Sunday": "pierre",
}
btn.addEventListener("click", function() {
  date >= 0 && date < 2 ? personPaying = `today is ${today} so ${names[today]} is footing the bill`
  : date >= 2 && date < 4 ? personPaying = `today is ${today} ${names[today]} is paying`
  : date >= 4 && date < 6 ?   personPaying = `Hi ${names[today]}, today is ${today} so although we are in Amsterdam we're not going ducth`
  : personPaying = `Hi ${names[today]}, today is ${today}, your turn to pay today`
  name.textContent = personPaying;
  image.src = `picture/${names[today]}.png`;
  image.alt = "picture of an avatar";
  var unseen = document.getElementsByClassName("unseen");
  var unseenArray = [...unseen]
  unseenArray.map(x => x.style.display = "inline");
}, false);

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Who's buying today</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/2da085e01f.js" crossorigin="anonymous"></script>



  </head>
  <body>
    <div class="container">
      <div id="name" class="center"></div>

      <button id="btn" type="submit">who's paying</button>
      <img id="image" src="">
        <i class="far fa-money-bill-alt unseen"></i>
        <i class="fab fa-cc-visa unseen"></i>
        <i class="fad fa-money-check-edit-alt unseen"></i>
    </div>
    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

Answer 1

未出现的图标（money-check-edit-alt) is only available with the Font Awesome Pro license。其他图标可在免费计划下使用。您需要升级才能使用该特定图标。

html 元素不可见。它在那里，但它的尺寸为 0x18

html element not visible. It's there but it has a dimension of 0x18

html

javascript

css

event-handling

font-awesome