如何让 Font Awesome 图标周围出现水平线？

Question

问题 我正在尝试创建一个作品集网站，并且想在两条水平线之间放置一个 Font Awesome 图标（如下所述），但它不起作用。我查看了 Stack Overflow，发现没有一个解决方案有效。

我需要什么
--------------- 图标 ---------------

到目前为止，我有这段代码，它在页面上为行留出了空间，但它们只是没有显示出来。图标就在那里就好了。

html {
  background: #333;
}

.landing-content {
  height: calc(100vh - 40vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.landing-content h1 {
  font-size: calc(1.5rem + 4vw);
  font-weight: 700;
  color: #e8e8e8;
}

.landing-content p {
  font-size: calc(0.6rem + 0.5vw);
  color: #e8e8e8;
}

.landing-content a {
  margin-top: 10px;
  padding: 5px 10px;
  text-decoration: none;
  background: transparent;
  color: #e8e8e8;
  border: 2px solid #e8e8e8;
  border-radius: 1em;
  transition-duration: 0.3s;
  cursor: pointer;
}

.landing-content a:hover {
  background: #e8e8e8;
  color: black;
  border-color: transparent;
}

.title-line {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: #e8e8e8;
  padding-bottom: 0.6%;
}

.title-line hr {
  flex-grow: 1;
  border: none;
  height: 1px;
  background-color: #e8e8e8;
}

.title-line .icon {
  margin: 0 10px;
  color: #e8e8e8;
}

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


<div class="landing-content">
  <h1 class="title">My Name</h1>
  <div class="title-line">
    <hr>
    <i class="fa-solid fa-user-astronaut fa-xl icon" aria-hidden="true"></i>
    <hr>
  </div>
  <p><q>Remember to look up at the stars and not down at your feet.</q> <span class=nowrap>- Stephen Hawking</span></p>
  <a href="#">Get Started</a>
</div>

Answer 1

border: none

属性隐藏线条。您可能还想为它们设置宽度。

html {
  background: #333;
}

.landing-content {
  height: calc(100vh - 40vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.landing-content h1 {
  font-size: calc(1.5rem + 4vw);
  font-weight: 700;
  color: #e8e8e8;
}

.landing-content p {
  font-size: calc(0.6rem + 0.5vw);
  color: #e8e8e8;
}

.landing-content a {
  margin-top: 10px;
  padding: 5px 10px;
  text-decoration: none;
  background: transparent;
  color: #e8e8e8;
  border: 2px solid #e8e8e8;
  border-radius: 1em;
  transition-duration: 0.3s;
  cursor: pointer;
}

.landing-content a:hover {
  background: #e8e8e8;
  color: black;
  border-color: transparent;
}

.title-line {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: #e8e8e8;
  padding-bottom: 0.6%;
}

.title-line hr {
  flex-grow: 1;
  width: 50px;
  height: 1px;
  background-color: #e8e8e8;
}

.title-line .icon {
  margin: 0 10px;
  color: #e8e8e8;
}

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


<div class="landing-content">
  <h1 class="title">My Name</h1>
  <div class="title-line">
    <hr>
    <i class="fa-solid fa-user-astronaut fa-xl icon" aria-hidden="true"></i>
    <hr>
  </div>
  <p><q>Remember to look up at the stars and not down at your feet.</q> <span class=nowrap>- Stephen Hawking</span></p>
  <a href="#">Get Started</a>
</div>