Codigo para personalizar icone "pedido,conta,carrinho"

Layout
1

NÃO SOU DESENVOLVEDORA WEB MAS ESTUDEI O BASICO E QUEBREI A CABEÇA PRA CONSEGUIR. SE PUDEREM ME SEGUIR NO INSTAGRAM @bruniinhathays FICAREI AGRADECIDA E DEIXA SEU DIRECT LÁ FALANDO QUE VOCE VEIO DA COMUNIDADE QUERO COMPARTILHAR TODOS OS MEUS CÓDIGOS DA LOJA

COPIAR E COLAR NA PARTE EDITAR CSS

/* tornar os icones pedido e minha conta transparentes /
#cabecalho .icon-list, .icon-user {
color: transparent;
background: transparent;
}
/ Retira a mensagem de “Carrinho vazio” */

.carrinho.vazio>a span {
display: none;
}

/* Retira mensagem de “Produto adicionado” */

.carrinho>a span {
display: none;
}

/* Ajusta tamanho da seção do Carrinho /
.conteudo-topo .carrinho {
border: 0px;
padding: 3px 0;
text-align: center;
margin-top: -10px;
width: 35px;
height:32px;
}
.conteudo-topo .carrinho>a i {
background: transparent;
display: inline-block;
width: 35px;
height: 32px;
line-height: 35px;
vertical-align: top;
}
.conteudo-topo .carrinho>a> {
float: inherit;
display: inline-block;
}
/ icone do carrinho */
.conteudo-topo .carrinho .icon-shopping-cart:before {
content: ‘’;
background: url(COLOCAR LINK DO ICONE);
width: 32px;
height: 32px;
vertical-align: middle;
color: transparent;
}

/* Icone minha conta */
.conteudo-topo .icon-user {
border: 0px;
padding: 3px 0;
text-align: center;
margin-top: -10px;
width: 32px;
height:32px;
color: transparent;
}
.conteudo-topo .icon-user>a i {
background: transparent;
display: inline-block;
width: 32px;
height: 32px;
line-height: 35px;
vertical-align: top;
}
.conteudo-topo .icon-user>a> {
float: inherit;
display: inline-block;
}
.conteudo-topo .icon-user:before {
content: ‘’;
background: url(COLOCAR LINK DO ICONE);
width: 32px;
height: 32px;
vertical-align: middle;
color: transparent;
}

/* Icone meus pedidos */
.conteudo-topo .icon-list {
border: 0px;
padding: 3px 0;
text-align: center;
margin-top: -10px;
width: 32px;
height:32px;
color: transparent;
}
.conteudo-topo .icon-list>a i {
background: transparent;
display: inline-block;
width: 32px;
height: 32px;
line-height: 35px;
vertical-align: top;
}
.conteudo-topo .icon-list>a> {
float: inherit;
display: inline-block;
}
.conteudo-topo .icon-list:before {
content: ‘’;
background: url(COLOCAR LINK DO ICONE);
width: 32px;
height: 32px;
vertical-align: middle;
color: transparent;
}

SUGIRO FAZER O UPLOAD DOS ICONES NO UPLOAD DA LOJA INTEGRADA

MINHA LOJA AINDA EM CONSTRUÇÃO MAS ABERTA PARA VOCÊS VEREM

5 curtidas
2

Legal, Bruna! Valeu.

3

Olá, meu código ficou assim. Usei em “editar CSS”, mas os ícones não foram alterados, so ficou sem fundo no local. O que tem de errado ?
(os pontos nos links, foi só pro site permitir a postagem)

/* tornar os icones pedido e minha conta transparentes /
#cabecalho .icon-list, .icon-user {
color: transparent;
background: transparent;
}
/ Retira a mensagem de “Carrinho vazio” */

.carrinho.vazio>a span {
display: none;
}

/* Retira mensagem de “Produto adicionado” */

.carrinho>a span {
display: none;
}

/* Ajusta tamanho da seção do Carrinho /
.conteudo-topo .carrinho {
border: 0px;
padding: 3px 0;
text-align: center;
margin-top: -10px;
width: 35px;
height:32px;
}
.conteudo-topo .carrinho>a i {
background: transparent;
display: inline-block;
width: 35px;
height: 32px;
line-height: 35px;
vertical-align: top;
}
.conteudo-topo .carrinho>a> {
float: inherit;
display: inline-block;
}
/* icone do carrinho */
.conteudo-topo .carrinho .icon-shopping-cart:before {
content: ‘’;
background: url(h.ttps://cdn.awsli.com.br/754/754548/arquivos/cffc2ddcf5d4aa62ce9120d90cc2c48a-iacute-cone-da-sacola-de-compras-com-tra-ccedil-o-rosa-by-vexels.png);
width: 32px;
height: 32px;
vertical-align: middle;
color: transparent;
}

/* Icone minha conta */
.conteudo-topo .icon-user {
border: 0px;
padding: 3px 0;
text-align: center;
margin-top: -10px;
width: 32px;
height:32px;
color: transparent;
}
.conteudo-topo .icon-user>a i {
background: transparent;
display: inline-block;
width: 32px;
height: 32px;
line-height: 35px;
vertical-align: top;
}
.conteudo-topo .icon-user>a> {
float: inherit;
display: inline-block;
}
.conteudo-topo .icon-user:before {
content: ‘’;
background: url(h.ttps://cdn.awsli.com.br/754/754548/arquivos/png-transparent-body-jewellery-line-design-white-user-icon-svg.png);
width: 32px;
height: 32px;
vertical-align: middle;
color: transparent;
}

/* Icone meus pedidos */
.conteudo-topo .icon-list {
border: 0px;
padding: 3px 0;
text-align: center;
margin-top: -10px;
width: 32px;
height:32px;
color: transparent;
}
.conteudo-topo .icon-list>a i {
background: transparent;
display: inline-block;
width: 32px;
height: 32px;
line-height: 35px;
vertical-align: top;
}
.conteudo-topo .icon-list>a> {
float: inherit;
display: inline-block;
}
.conteudo-topo .icon-list:before {
content: ‘’;
background: url(https://cdn.awsli.com.br/754/754548/arquivos/png-transparent-computer-icons-order-picking-text-task-symbol.png);
width: 32px;
height: 32px;
vertical-align: middle;
color: transparent;
}

1 curtida