如何让水平线（仅带有 <hr>）出现在 Font Awesome 图标周围？ [重复]

Question

问题

我正在尝试创建一个作品集网站，我想使用

<hr>

元素在两条水平线之间放置一个 Font Awesome 图标，但它不起作用。我查看了 Stack Overflow，发现没有一个解决方案有效。这篇文章被标记为重复，并带有指向中间有单词的水平线CSS技术的链接，但这仅解释了如何使用伪元素而不是<hr>

元素制作线条。

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

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

代码片段

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>Stellar quote</q> <span class=nowrap>- Smart Person</span></p>
  <a href="#">Get Started</a>
</div>

Answer 1

border: none

属性隐藏线条。

您可能还想为它们设置宽度。我在下面的示例中直接在 hr 上执行了此操作，但您也可以在父元素的类上设置

width: 100%

（或您选择的其他百分比）。

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>

Answer 2

我宁愿使用 CSS 来完成此操作，而不是额外的标记。行元素上的伪元素可以很好地工作。您消除了规则元素，剩下的 CSS 数量大致相同。请注意，不再需要图标上的边距。

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;
  justify-content: center;
  margin: 20px 0;
  color: #e8e8e8;
  padding-bottom: 0.6%;
}

 /* -------------- STARTING HERE -------------- */
.title-line::before,
.title-line::after {
  content: '';
  width: 10%;
  height: 2px;
  background: #e8e8e8;
  position: absolute;
  left: calc(50% + 1.5rem);
}

.title-line::after {
  left: auto;
  right: calc(50% + 1.5rem);
}

<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">
    <i class="fa-solid fa-user-astronaut fa-xl icon wings" aria-hidden="true"></i>
  </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>