如何調整圖標大小以使其響應？

如果我讓瀏覽器/屏幕變小，我該如何自動調整圖標大小？這是我的代碼的一部分，以及在大屏幕和小屏幕上顯示時的外觀。如何調整圖標大小以使其響應？

<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

如何調整圖標大小以使其響應？

回答

相關問題