aligned images and text in footer
by Sascha
HTML
<footer>
<div class="socialIcon"><img src="https://pngimage.net/wp-content/uploads/2018/06/telefoon-png.png" height="30"></div>
<div class="socialText">06-123456</div>
<div class="socialIcon"><img src="https://pngimage.net/wp-content/uploads/2019/05/white-mail-png-1.png" height="30"></div>
<div class="socialText">[email protected]</div>
<div class="socialIcon"><a class="socialIcon" href="https://www.instagram.com/example/">
<img src="https://pngimage.net/wp-content/uploads/2019/05/white-transparent-instagram-png-1.png" height="30"/></a></div>
<div class="socialText"><a class="socialText" href="https://www.instagram.com/example/">@example</a></div>
</footer>
CSS
footer {
background: #666;
position: fixed;
bottom: 0;
width: 100%;
color: white;
font-family: proxima-nova, sans-serif;
text-align: center;
font-size: 20px;
padding: 5px;
}
.socialText {
display: inline-block;
}
.socialIcon {
display: inline-block;
margin-left: 10px;
margin-right: 3px;
margin-bottom: 0px;
margin-top: 0px;
padding-bottom: 0px;
height: 30px;
}
img {
vertical-align: middle;
}