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

如果我让浏览器/屏幕变小，我该如何自动调整图标大小？这是我的代码的一部分，以及在大屏幕和小屏幕上显示时的外观。如何调整图标大小以使其响应？

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

大屏幕：

小屏幕：

来源

2015-10-19 KaelJasper

https://fortawesome.github.io/Font-Awesome/examples/ ...这会帮助你 –

@Ramanaa GJ我已经尝试过这一点，但它仍然不会每次我调整屏幕时都会变小 – KaelJasper

请尝试CSS中的字体大小（即） –

我敢肯定，你可以减小字体大小，图标就会变小。

例如：

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

来源

2015-10-19 04:04:25 Himechi90

Spot on。字体大小改变了图形的大小。 – mwan

@mwan我试图做到这一点，但它没有做任何事情。 – KaelJasper

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

来源

2015-11-20 05:35:10

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

回答

相关问题