如何使字體真棒圖標大？

我怎樣才能讓字體真棒圖標大，因爲他們在這個頁面：如何使字體真棒圖標大？

我使用了類FA-5X，但它是不一樣的頁面例如最大的圖標。

下面

是HTML和CSS我使用，我試圖讓更大的圖標是在結束沐浴

感謝

.container-fluid{ 
 
    
 
    height:50%; 
 
} 
 

 
#run{ 
 
    
 
    background-color:green; 
 
    height:1000px; 
 
    
 
    
 
} 
 

 
.red{ 
 
    
 
    background-color:red; 
 
} 
 

 
.green{ 
 
    
 
    background-color:green; 
 
} 
 

 
.blue{ 
 
    
 
    background-color:blue; 
 
} 
 

 
.reg{ 
 
    
 
    height:400px; 
 
     
 
    
 
} 
 

 
.big{ 
 
    height:1000px; 
 
} 
 

 
.pigi{ 
 
    
 
    color:red; 
 
    font-size:225em; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>example page</title> 
 
    <meta name="description" content="example page"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="/Users/tomer/Desktop/test page/first.css"> 
 
    <link rel="stylesheet" href="/Users/tomer/Desktop/font-awesome-4.7.0/css/font-awesome.min.css"> 
 
    
 
    
 
    
 
    </head> 
 
<body> 
 
<!-----navigation bar-------> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a href="" class="navbar-brand">HelloMan</a> 
 
     </div> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 1<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1</a></li> 
 
      <li><a href="#">Page 2</a></li> 
 
      <li><a href="#">Page 3</a></li> 
 
      </ul> 
 
      
 
      </li> 
 
      <li><a href="#">Page 2</a><span class="glyphicon glyphicon-eur"></span></li> 
 
      <li><a href="#">Page 3</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-music"></span></a></li> 
 
      <li><a href="#"><span class="glyphicon glyphicon-eur"></span></a></li> 
 
     
 
     </ul> 
 
     
 
     
 
     
 
     </div> 
 
    
 
    
 
    
 
    
 
    
 
    </nav> 
 
    
 
    
 
    
 
    
 
    <!-----end navigation------> 
 
<div class="container-fluid" > 
 
    <h1 style="text-align:center;">Example page</h1> 
 
    <div class="row"> 
 
    <div class="col-md-4 blue big"> 
 
     brushes 
 
     
 
     </div> 
 
    <div class="col-md-4 red reg"> 
 
     Tishues 
 
     
 
     </div> 
 
     
 
     <div class="col-md-4 green reg"> 
 
     Gunners 
 
     
 
     </div> 
 
    
 
    </div> 
 
    <i class="fa fa-bath pigi" aria-hidden="true"></i> 
 
    
 
    </div> 
 
</body> 
 
</html>

來源

2016-11-27 tomer

添加一個額外的類到您

<i class="fa fa-example extraClass"></i>

，並在你的CSS：

.extraClass{ font-size:50px; }

或適合你的任何尺寸。

雖然你的問題很模糊。更好地提供一個jsfiddle。

來源

2016-11-27 20:26:14

我試着在圖標中添加另一個類，但是我設法只在添加css內聯時才使圖標變大。任何理由？ – tomer

謝謝你的方式！ – tomer

也許另一個班級對元素有更高的優先級。嘗試刪除fa-5x類。如果它仍然無法檢查元素並查看哪個規則真的影響它。 –

字體真棒圖標只是與其他字體相同，您可以將CSS應用於它們。

.fa-ICON_NAME{ 
font-size: 50px; 
}

來源

2016-11-27 20:25:20

這確實有用，但是由於您正在放大該類的所有圖標。 –

你是正確的課程，當你使用任何框架或插件時，額外的課程總是很好的做法。我只是簡單地讓他申請CSS。 –

是的我試圖防止OP在他不知道的情況下嚇壞了！你得到一個投票我btw， –

如何使字體真棒圖標大？

回答

相關問題