Как сделать чтоб цвет менялся в виде сердца

Question

Как сделать чтоб цвет менялся в виде сердца

Рейтинг: 0Ответов: 1Опубликовано: 26.03.2023

Надо чтоб сердце не только обводилось в виде сердца,но и само было красным ( типо полностью красный )

И как его опустить на уровень текста,ибо если я придаю ему padding,то увеличивается кружочек в котором находится сердечко

* {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    
}


.navlist  {
    display: flex;
    list-style: none;
}

.navlist>img {
    width: 60px;
    height: auto;
    padding: 0.5em;
}

.navlist a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 1.5em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.gorod {
    padding: 1.5em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



.icons {
    background-color: #cac7c7;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    display: inline-block;
    width:35px;
    height:35px;
    text-align:center;
    line-height:45px;
}
#heart {
    font-size: 25px;
}
#heart:hover {
    color:red;
    transition: 0.8s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flowers</title>  
    <link rel="stylesheet" href="static/styles/style.css">
    <script src="https://kit.fontawesome.com/3929e16ef5.js" crossorigin="anonymous"></script>
    <script src="{% static 'network/functions.js' %}"></script>
  </head>
<body>
    <div class="navbar">
         <ul class="navlist" >
          <img src="static/images/logo.png" alt="">
            <li><a href="">Доставка и оплата</a></li>
            <li><a href="">Условия возврата</a></li>
            <li><a href="">Отзывы</a></li>
            <li class="gorod">Уфа</li>
            <li class="nomer"><a href="">+7 (762) 283-93-88</a></li>
          </ul>
          <div class="icons">
        <i id="heart" class="far fa-heart"></i>
    </div>
    </div>

    
</body>
</html>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0

Не проще ли использовать <i id="heart" class="fas fa-heart"></i> вместо <i id="heart" class="far fa-heart"></i>

Будет точно такая же иконка, которая имеет твердый (solid) стиль, то есть, все границы залиты цветом

Если это необходимо сделать только на эффекте hover, то задачу можно решить с помощью JS или jQuery:

$("#heart").hover(function() {
  $(this).toggleClass('fas fa-heart');
  $(this).toggleClass('far fa-heart');
});

* {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    
}


.navlist  {
    display: flex;
    list-style: none;
}

.navlist>img {
    width: 60px;
    height: auto;
    padding: 0.5em;
}

.navlist a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 1.5em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.gorod {
    padding: 1.5em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.icons {
    background-color: #cac7c7;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    display: inline-block;
    width:35px;
    height:35px;
    text-align:center;
    line-height:45px;
    margin-top: 20px;
}
#heart {
    font-size: 25px;
}
#heart:hover {
    color:red;
    transition: 0.8s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flowers</title>  
    <link rel="stylesheet" href="static/styles/style.css">
    
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://kit.fontawesome.com/3929e16ef5.js" crossorigin="anonymous"></script>
    <script src="{% static 'network/functions.js' %}"></script>
  </head>
<body>
    <div class="navbar">
         <ul class="navlist" >
      <img src="static/images/logo.png" alt="">
        <li><a href="">Доставка и оплата</a></li>
        <li><a href="">Условия возврата</a></li>
        <li><a href="">Отзывы</a></li>
        <li class="gorod">Уфа</li>
        <li class="nomer"><a href="">+7 (762) 283-93-88</a></li>
      </ul>
          <div class="icons">
        <i id="heart" class="far fa-heart"></i>
    </div>
    </div>

    
</body>
</html>

А для выравнивания просто добавьте margin-top: Npx; для класса icons

Как сделать чтоб цвет менялся в виде сердца

Ответы