• Buenos días,

    Me gustaría poder ponerle el círculo gris al icono del carrito que he a?adido con CSS, al igual que aparece en el icono de la izquierda. Lo he intentado de varias formas pero no lo he conseguido, aquí os paso una foto: https://imgur.com/a/jREURXj

    mi página web: https://madicontrol.com/tienda/

    Aquí os pongo el código CSS del carrito:

    #wrap .wcmenucart-cart-icon .wcmenucart-count {
    border: 0;
    text-align: center;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    margin-bottom: 10px;
    background: #EEB601;
    color: #000;
    }

    #wrap .bag-style:hover .wcmenucart-cart-icon .wcmenucart-count {
    background: #F1F1F1;
    color: #000;
    }

    #wrap .wcmenucart-cart-icon .wcmenucart-count:after {
    background: url(‘https://madicontrol.com/tienda/wp-content/uploads/2021/09/shopping-cart-5.svg’);
    background-size: cover;
    background-position: center center;
    border: 0;
    width: 45px;
    height: 45px;
    border-radius: 0;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    }

    #wrap .bag-style:hover .wcmenucart-cart-icon .wcmenucart-count:after, .show-cart .wcmenucart-cart-icon .wcmenucart-count:after {
    height: 45px;
    }

    #wrap .wcmenucart-details {
    top: -12px;
    }

    Gracias de antemano

    English below:

    Good morning,

    I would like to be able to put the grey circle on the cart icon that I have added with CSS, as it appears on the icon on the left. I have tried several ways but I have not been able to do it, here is a picture: https://imgur.com/a/jREURXj

    my website: https://madicontrol.com/tienda/

    Here is the CSS code of the cart:

    #wrap .wcmenucart-cart-icon .wcmenucart-count {
    border: 0;
    text-align: center;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    margin-bottom: 10px;
    background: #EEB601;
    colour: #000;
    }

    #wrap .bag-style:hover .wcmenucart-cart-icon .wcmenucart-count {
    background: #F1F1F1;
    colour: #000;
    }

    #wrap .wcmenucart-cart-cart-icon .wcmenucart-count:after {
    background: url(‘https://madicontrol.com/tienda/wp-content/uploads/2021/09/shopping-cart-5.svg’);
    background-size: cover;
    background-position: center center;
    border: 0;
    width: 45px;
    height: 45px;
    border-radius: 0;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    }

    #wrap .bag-style:hover .wcmenucart-cart-cart-icon .wcmenucart-count:after, .show-cart .wcmenucart-cart-icon .wcmenucart-count:after {
    height: 45px;
    }

    #wrap .wcmenucart-details {
    top: -12px;
    }

    Thanks in advance

Viewing 8 replies - 1 through 8 (of 8 total)
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Circle wrapping the icon’ is closed to new replies.