Uso do background-size

Fala aí Roger, tudo bem?

Quando estamos trabalhado com backgrounds nas div, diferente da tag img que irá renderizar toda a imagem (por padrão), precisamos definir sua altura e largura, senão a div ficará vazia e nada será mostrado.

Após definir dimensão da div pode ser que o background não aparece ou fique como queremos, dai, setamos o background-size geralmente com o mesmo valor da div ou cover.

Assim, ele irá ocupar a div toda.

Espero ter ajudado.

Matheus, obrigado pela explicação.

Olhei no meu código se há definição de largura/altura na div. No arquivo site.css, há o seguinte:

.container { /*classe da div*/
    width: 80ch;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5em 0;
}

Da forma que está, não consegui ver a relação entre o que foi definido na div e o que foi definido nos ícones:

.com-icone::after{
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    width: 2em;
    height: 2em;
    background-size: 50% 50%;
    background-color: #8C1D3D;
    background-repeat: no-repeat;
    background-position: center;
}

Mas veja, que foi definido no ::after:

width: 2em;
height: 2em;

Para calcular o em devemos levar em consideração a definição do font-size no elemento pai.

Por exemplo:

.minha-div {
    font-size: 20px;
}

<div class="minha-div"></div>

Veja que o font-size da minha-div foi definido em 20px, agora:

.meu-filhos {
    height: 3em;
    width: 2em;
}

<div class="minha-div">
    <span class="meu-filho"></span>
</div>

Qual será o tamanho de height e width? Bom, para cada 1em devemos multiplicar pelo font-size do pai, logo temos:

/* elemento pai */
.minha-div {
    font-size: 20px;
}

/* elemento filho*/
.meu-filhos {
    height: 3em; /* 3 * 20 = 60px */
    width: 2em; /* 2 * 20 = 40px */
}

Dessa maneira que está sendo feito no exemplo. Depois, está dizendo que ele deve ocupar metade da largura e metade da altura:

background-size: 50% 50%;

Ou seja, se seu elemento pai possuí font-size igual á 16px, seu elemento terá: 32x32 (2em * 16).

E como estamos dizendo para o background ocupar metade de altura e largura, ele terá o tamanho de 16x16.

Espero ter ajudado.

Obrigado Matheus. Eu entendi o que você explicou. Em cima do último exemplo que você deu, por que então não seria possível fazer desta forma?

/* elemento filho*/
.meu-filhos {
    height: 1.5em; /* 1.5 * 20 = 40px */
    width: 1em; /* 1 * 20 = 20px */
}

E junto a isso, não utilizar o background-size?

Magina Roger, sempre que precisar não deixe de criar suas dúvidas.

Bom, era para funcionar, precisa entender o cenário, tem o exemplo, analisar, pode ter N fatores para não estar funcionando.

Espero ter ajudado.