Как я могу сделать так, чтобы вокруг значка Font Awesome появлялись горизонтальные линии?

Проблема Я пытаюсь создать веб-сайт-портфолио и хочу поместить значок 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>

html css font-awesome

03.07.2024 17:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Атрибут 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>

03.07.2024 17:47

Я бы предпочел сделать это с помощью 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>

03.07.2024 18:07

Другие вопросы по теме

CSS-сетка/гибкая сетка сжимается в зависимости от содержимого, но растет равномерно

Одна цифра выравнивается по второй позиции (должна быть ниже второй цифры)

Класс CSS исчез без предупреждения, куда он делся?

Сетка. Возникли проблемы с элементом div, находящимся поверх элемента div с непрозрачностью

Поместите div внизу

Как я могу переопределить цвет p-разделителя PrimeNG

Как исключить определенные элементы из флексбокса в CSS, не помещая элемент в новый div?

Имейте липкую панель навигации поверх содержащих блоков

Rails 7 с картами импорта и объединением CSS: ресурсы не обслуживаются из каталога /builds

SVG не занимает всю ширину контейнера div

Как я могу сделать так, чтобы вокруг значка Font Awesome появлялись горизонтальные линии?

Ответы 2

Другие вопросы по теме

Похожие вопросы