如何调整图标大小以使其响应？

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;
  }
}