Как изменить размеры значков так, чтобы они реагировали?

Question

Как сделать иконки автоматически изменяться, если я сделаю браузер/экран меньше? Вот часть моего кода и фотографии того, как он выглядит, когда отображается на большом экране и на маленьком экране.

<div class="row mt"> 
    <div class="col-md-3 col-sm-3 mb"> 
    <div class="green-panel pn"> 
     <div class="green-header"> 
     <h5>ADD NEW STUDENT</h5> 
     </div> 
     <div class="row"> 
     <div class="centered"> 
     <a href="<?php echo site_url('admin/addstud'); ?>"><i class="fa fa-user-plus"></i></a> 
     </div> 
     </div> 
    </div><! --/grey-panel --> 
    </div><!-- /col-md-4--> 

    <div class="col-md-3 col-sm-3 mb"> 
    <div class="green-panel pn"> 
    <div class="green-header"> 
    <h5>ADD NEW FACULTY</h5> 
    </div> 
    <div class="row"> 
    <div class="centered"> 
     <a href="<?php echo site_url('admin/addfac'); ?>"><i class="fa fa-user-plus"></i></a> 
    </div> 
    </div> 
    </div><! --/grey-panel --> 
    </div><!-- /col-md-4--> 

Большой экран:

Малый экран:

Answer 1

Я уверен, что вы можете просто уменьшить размер шрифта и значок будет меньше.

пример:

/* For screen width smaller than 768px */  
@media screen and (max-width: 768px) { 
    .fa { 
    font-size: 18px; // or whatever size you want 
    } 
} 

Answer 2

@media (max-width: 768px) { 
    .centered .fa-user-plus { 
    font-size: 20px; 
    } 
}