Olá Nick...
Voce pode tentar as propriedades margin, padding e gap e ver qual se adapta melhor.
Pode testar tanto no icone quanto no texto.
Ou:
Se você deseja ajustar o espaço entre o ícone e o texto, pode controlar isso alterando o valor do left ou, se necessário, o margin ou padding dentro de .link::before.
Se você já tentou alterar o left: -10px; e não notou diferença, pode ser que o valor -10px não seja suficiente ou tenha algum outro estilo afetando o comportamento. Tente usar valores mais altos (como -20px ou -30px) ou adicione um margin ao próprio ícone.
Exemplo:
.link::before {
content: "";
position: absolute;
left: -20px; /* Ajuste conforme necessário */
top: 0;
width: 35px;
height: 35px;
background-image: url('icone.png');
background-size: cover;
display: block;
/* Outros estilos */
}
Ou se quiser mais controle sobre o espaçamento, você pode tentar usar margin-right no texto para distanciar o ícone:
.link {
margin-left: 40px; /* Ajuste conforme necessário */
position: relative;
}
Você mencionou que o último ícone tem um tamanho diferente (88x66) em comparação com os outros (64x64), e não consegue aparecer completamente. Isso pode ser causado pela falta de espaço ou pela maneira como o layout está sendo controlado.
Se o ícone maior não está aparecendo, pode ser que o container ou a posição do ícone não esteja permitindo que ele tenha o tamanho necessário.
Tente verificar se o container onde os ícones estão sendo exibidos tem largura e altura suficientes para comportar os ícones maiores.
.link::before {
width: 88px; /* Ajuste o tamanho do ícone maior */
height: 66px;
background-size: cover;
}
Se você não quer alterar a largura e altura do ícone (porque deseja manter os ícones em tamanhos diferentes), use a propriedade background-size para ajustar a imagem ao tamanho da caixa (usando cover ou contain para fazer a imagem se ajustar proporcionalmente).
.link::before {
content: "";
position: absolute;
left: -20px;
top: 0;
width: 35px;
height: 35px;
background-image: url('icone_maior.png');
background-size: contain; /* Isso ajusta a imagem mantendo a proporção */
display: block;
}
O valor de width: 35px; e height: 35px; em .link::before significa que o ícone será redimensionado para 35px de largura e altura, independentemente do tamanho original da imagem. Isso é o que está causando o redimensionamento dos ícones.
Como você mencionou que o tamanho desejado é 64x64 para os ícones, basta alterar esses valores para 64px. Ou, se quiser que as imagens se ajustem ao tamanho dos ícones de 64x64, basta garantir que o valor de width e height em .link::before seja o mesmo.
.link::before {
content: "";
position: absolute;
left: -10px; /* Ajuste conforme necessário */
top: 0;
width: 64px; /* Ajuste para o tamanho desejado */
height: 64px; /* Ajuste para o tamanho desejado */
background-image: url('icone.png');
background-size: cover; /* Ajuste a imagem para cobrir o espaço */
display: block;
}
A escolha de 35px provavelmente foi feita para garantir que os ícones sejam exibidos de forma consistente e ajustada ao layout.
Se você tem ícones de diferentes tamanhos, pode ser necessário ajustar o valor de width e height para corresponder aos tamanhos das imagens, mas lembre-se de que isso pode afetar o alinhamento e o layout geral.
- Use margens ou ajuste a posição (
left) para criar o espaço desejado. - Verifique o tamanho do container ou use
background-size: contain; para ajustar a imagem ao tamanho da caixa. - Se você quiser manter o tamanho fixo para os ícones, defina os valores de
width e height para 64px, ou outro valor adequado, conforme necessário.
Faz os testes ai e avise os resultados.
Para uma resposta melhor cola seu html e css aqui para que eu possa analisar.
Aguardo...
