Tenho uma div
que contem alguns ícones, o qual estão alinhados horizontalmente, porem de acordo com o tamanho da tela em que ele é exibido é gerado uma quebra de linha, meu objetivo é prevenir que isso ocorra. mesmo que os ícones sejam redimensionados.
#share-buttons img {
width: 75px;
height: 75px;
padding: 8px;
border: 0;
box-shadow: 0;
display: inline;
}
<!-- I got these buttons from simplesharebuttons.com -->
<div id="share-buttons">
<!-- Email -->
<a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://cncharitas.org.br/">
<img src="https://i0.wp.com/simplesharebuttons.com/images/somacro/email.png?w=840&ssl=1" alt="Email" width="59" height="59">
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/clubenavalcharitas/" target="_blank">
<img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/facebook.png?w=840&ssl=1" alt="Facebook" width="59" height="59">
</a>
<!-- Google+ -->
<a href="https://plus.google.com/+ClubeNavalCharitasNiter%C3%B3i" target="_blank">
<img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/google.png?w=840&ssl=1" alt="Google" width="59" height="59">
</a>
<!-- WhasApp-->
<a href="http://api.whatsapp.com/send?1=pt_BR&phone=5521971293327&text=entre%20em%20contato%20conosco" target="_blank">
<img src="https://i0.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/whasapp.png?w=840&ssl=1" alt="WhatsApp" width="59" height="59">
</a>
<!-- intagram-->
<a href="https://www.instagram.com/cncharitas/" target="_blank">
<img src="https://i1.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/intagram.png?w=840&ssl=1" alt="instagram" width="59" height="59">
</a>
</div>
Quando a tela é pequena tenho esse resultado.
E gostaria de algo parecido com:
Os ícones foram reduzidos para se adequar a tela em questão. isso é possível?