How can I get horizontal lines to appear surrounding Font Awesome icon?

Question

Problem I'm trying to create a portfolio website and I want to place a Font Awesome icon between two horizontal lines (as detailed below), but it's not working. I've looked around Stack Overflow and none of the solutions I've found have worked.

What I Need
--------------- icon ---------------

So far, I have this code and it makes the space on the page for the lines, but they just aren't showing up. The icon is there just fine.

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

The border: none attribute is hiding the lines.

You may also want to set a width for them. I did this directly on the hr in my example below, but you could alternatively set width: 100% (or other % of your choice) on the parent element's class.

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>