Как добавить данный элемент в иконку?

Question

как добавить такой кружок с цифрой в иконку с тележкой?

<div class="icons">
                <a href="#"><img class="loupe" src="img/icons/loupe.svg" alt=""></a>
                <a href="#"><img src="img/icons/scale.svg" alt=""></a>
                <a href="#"><img src="img/icons/heart.svg" alt=""></a>
                <a href="#"><img src="img/icons/user.svg" alt=""></a>
                <a href="#"><img src="img/icons/trolley.svg" alt=""></a>
                <a href="#"><img class="phone" src="img/icons/phone.svg" alt=""></a>
            </div>

Answer 1

Например так:

.icons {
    height: 50px;
}

.icons img {
    width: 50px;
    height: 50px;
}

.icons a {
    position: relative;
}

.icons .info:after {
    content: "12";
    
    position:  absolute;
    right:    0px;
    
    width:     20px;
    height:    20px;
    
    background: red;
    color:      white;
    
    font-size:  10px;
    text-align: center;
    line-height: 20px;
    
    border-radius: 10px;
}

<div class="icons">
    <a href="#" class = "info"><img class="loupe" src="https://romansaburov.ru/wp-content/uploads/2017/07/shoping-cart-min.jpg" alt=""></a>
</div>

Но лучше (чтобы управлять тем, что выводится) добавить дополнительный <div>

    .icons {
        height: 50px;
    }

    .icons img {
        width: 50px;
        height: 50px;
    }

    .icons a {
        position: relative;
    }

    .icons .info {
        position:  absolute;
        right:    0px;
        
        width:     20px;
        height:    20px;
        
        background: red;
        color:      white;
        
        font-size:  10px;
        text-align: center;
        line-height: 20px;
        
        border-radius: 10px;
    }

    <div class="icons">
        <a href="#"><div class = 'info'>12</div><img class="loupe" src="https://romansaburov.ru/wp-content/uploads/2017/07/shoping-cart-min.jpg" alt=""></a>
    </div>

БЛОГ НА HUSL

Как добавить данный элемент в иконку?

Ответы (1 шт):