Мобильная версияЯ пытаюсь создать веб-сайт-портфолио и хочу поместить значок Font Awesome между двумя горизонтальными линиями, используя элементы , но это не работает. Я просмотрел Stack Overflow, и ни одно из найденных мной решений не сработало. Этот пост был помечен как дубликат со ссылкой на технику 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;
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;
}Код: Выделить всё
My Name
[i][/i]
Stellar quote - Smart Person
[url=#]Get Started[/url]
Подробнее здесь: https://stackoverflow.com/questions/787 ... font-aweso
