Resize fontawesome icons on change in screen size

Question

Trying to change the size of the icons on a bootstrap grid with following code and the media query but can't seem to make it work.

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .fa-5x {
      font-size: 1em;
    }
    h1 {
      color: red;
      font-size: 1em;
    }
  }

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .fa-5x {
      font-size: 1em;
    }
    h1 {
      color: red;
      font-size: 1em;
    }
  }

<div class="row">
  <a href="washrooms.php">
    <div class="col-lg-4 col-xs-4">
      <center>
        <h3>
          <i class="fa fa-eye-slash fa-5x"></i> <br>Washrooms
        </h3>
      </center>
    </div>
  </a>
  <a href="intermidiate.php"> 
    <div class="col-lg-4 col-xs-4">
      <center>
        <h3>
          <i class="fa fa-shopping-cart fa-5x"></i> <br>Shops
        </h3>
      </center>
    </div>
  </a>
  <a href="intermidiateservice.php">
    <div class="col-lg-4 col-xs-4">  
      <center>
        <h3>
          <i class="fa fa-wrench fa-5x"></i> <br>Services
        </h3>
      </center>
    </div>
  </a>
</div>



</div>

The code intends to scale down icon size to fit small screens, but doesn't work. Can someone help point out what is wrong or help to achieve the purpose.

Answer 1

For responsive font size you can use viewport width (vw).

For further reading

PS: this may not support all mobile browsers.

• Help :)