как отодвинуть картинку awesome от текста. html css
картинка пристыкована к тексту, на между ними сделать пробел?
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
ul {
list-style-type: none;
padding: 0;
}
/* Bootstrap
------------------------------------------------------------- */
/* Grid xxxl */
.col-xxxl,
.col-xxxl-auto,
.col-xxxl-12,
.col-xxxl-11,
.col-xxxl-10,
.col-xxxl-9,
.col-xxxl-8,
.col-xxxl-7,
.col-xxxl-6,
.col-xxxl-5,
.col-xxxl-4,
.col-xxxl-3,
.col-xxxl-2,
.col-xxxl-1 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 1600px) {
.col-xxxl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.row-cols-xxxl-1 > * {
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-xxxl-2 > * {
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-xxxl-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.row-cols-xxxl-4 > * {
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-xxxl-5 > * {
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-xxxl-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-xxxl-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-xxxl-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-xxxl-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-xxxl-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-xxxl-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-xxxl-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-xxxl-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-xxxl-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-xxxl-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-xxxl-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-xxxl-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-xxxl-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-xxxl-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 1600px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl,
.container-xxxl {
max-width: 1536px;
}
}
/* Navbar */
.navbar {
height: 100%;
padding: 0;
}
.navbar-brand {
padding: 0;
width: 16.6666666667%;
}
.navbar-logo {
height: 60px;
width: auto;
}
.nav-link {
display: flex;
align-items: center;
}
/* Dropdown */
.dropdown-toggle:after {
border: 0;
content: "\f078";
font-family: "Font Awesome 5 Free";
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
/* Forms */
.form-group:not(:last-child) {
margin-bottom: 1rem;
}
/* Common
------------------------------------------------------------- */
/* Content */
.wrapper {
flex: 1 0 auto;
padding-top: 112px;
}
.content {
height: 100%;
flex-grow: 0;
padding: 40px 0 0;
}
/* Header */
.header {
height: 112px;
}
.header__top {
background-color: #343434;
color: #fff;
display: flex;
align-items: center;
height: 40px;
}
.header__bottom {
background-color: #4B4B4B;
height: 72px;
}
/* Social */
.social {
display: flex;
}
.social__link {
background-color: #fff;
border-radius: 50%;
color: #5A5A5A;
display: flex;
align-items: center;
justify-content: center;
height: 24px;
font-size: 16px;
width: 24px;
}
.social__link:not(:last-child) {
margin-right: 1rem;
}
/* cover */
.cover {
background-color: aquamarine;
display: flex;
align-items: center;
height: 100%;
}
.cover__content {
padding: 60px 0;
}
/* text_rotate */
.text_rotate {
transform: rotate(-10.61deg);
margin-top: 61px;
}
/* icon */
.icon {
color: #5A5A5A;
}
.favorites_img {
height: 240px;
width: 100%;
margin-bottom: 48px;
}
.btn {
width:100%;
}
/* footer */
.footer {
flex-shrink: 0;
background-color: #343434;
/* padding: 74px 0 25px 104px; */
}
.footer__top {
color: #fff;
padding: 82px 0;
}
.footer__bottom {
padding-bottom: 28px;
}
.nav-link {
color: #FFFFFF;
}
.nav-item {
padding-top: 10px;
}
.nav-item a {
padding: 0;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>title</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous" />
<link rel="stylesheet" href="<?= 'css/style.css' . '?' . filemtime('css/style.css') ?>" />
</head>
<body>
<div class="wrapper">
<footer class="footer">
<div class="footer__top">
<div class="container">
<nav class="row justify-content-between">
<div class="col-auto">
Контакты
<div class="nav-item">
<a href="#" class="nav-link"><i class="fas fa-phone-alt"></i><span> +7 (495) 980 0000</span></a>
<a href="#" class="nav-link"><i class="fas fa-envelope"></i> [email protected]</a>
<a href="#" class="nav-link"><i class="fas fa-map-marker-alt"></i> адрес</a>
<br>
<div class="social">
<a href="#" class="social__link"><i class="fab fa-instagram"></i></a>
<a href="#" class="social__link"><i class="fab fa-vk"></i></a>
<a href="#" class="social__link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social__link"><i class="fab fa-facebook-f"></i></a>
</div>
</div>
</div>
</nav>
</div>
</div>
</body>
Ответы (1 шт):
Автор решения: Academik
→ Ссылка
Если речь идет про меню, то добавьте следующий стиль:
.nav-link .fas {
margin-right: 10px;
}