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

atlaska826
July 3, 2024
120 views
0 votes
2 Answers

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>

Answers

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>

I’d rather do this with CSS than extra markup. Pseudo-elements on your line element could work well. You eliminate the rule elements and are left with roughly the same amount of CSS. Note that the margin on the icon is no longer needed.

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers