How to retain icon dimensions in a responsive design? Without using pixels - html

Question

First of all, I just wanted to say this page is for a Web Design course.
I have icons for social media in a responsive page I'm building, and I've applied a max-width:3% to all of them to reduce their original size, as they were too big before. Now, as I reduce the size of the window, I would like the icons stay responsive while retaining their new size. However, the icons scale as well, making them appear too small. I know I could use pixels to define a fixed size, but one of the objectives of this exercise is to not set image values in pixels (just allowed for padding values).
Is there a way to achieve this?
My html codes
<div id="footwrap">
<footer>
<div id="footh3">
<h3 class="h3">Follow me on social media:</h3>
</div>
<div id="footlink">
<a href="http://www.facebook.com" target="_blank">
<img src="images/facebook-icon.svg" alt="Facebook">
</a>
<a href="http://www.instagram.com" target="_blank">
<img src="images/instagram-icon.svg" alt="Instagram">
</a>
<a href="http://www.youtube.com" target="_blank">
<img src="images/youtube-icon.svg" alt="YouTube">
</a>
<a href="http://www.twitter.com" target="_blank">
<img src="images/twitter-icon.svg" alt="Twitter">
</a>
</di>
</footer>
</div>
My CSS style:
#footwrap {
clear: both;
padding: 2%;
}
footer {
position: relative;
clear: both;
text-align: center;
width: 100%;
height: 8em;
margin-top: 12%;
}
#footh3 {
display: inline-block;
}
footer h3 {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 1.17em;
margin-bottom: 2em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
#footlink {
display: inline-block;
}
footer a {
text-decoration: none;
}
footer img {
display: inline-block;
max-width: 3%;
height: auto;
margin-left: 1.5%;
margin-right: 10px;
vertical-align: middle;
}
The desired outcome would be how the icons in the top right corner of this page react when the web browser window is reduced: http://www.omganeshaya.com/

Answer 1

You can use media queries to adjust to a higher percentage as the page gets smaller. see fiddle: https://jsfiddle.net/622r62mp/
For more information about media queries you can reference this site https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
CSS example
img{max-width:3%}
#media (max-width: 1000px){
img{max-width:9%}
}
#media (max-width: 600px){
img{max-width:15%}
}