如何使字体真棒图标大？

问题描述：

我怎样才能让字体真棒图标大，因为他们在这个页面：如何使字体真棒图标大？

我使用了类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>

答

添加一个额外的类到您

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

，并在你的CSS：

.extraClass{ font-size:50px; }

或适合你的任何尺寸。

虽然你的问题很模糊。更好地提供一个jsfiddle。

我试着在图标中添加另一个类，但是我设法只在添加css内联时才使图标变大。任何理由？ – tomer

谢谢你的方式！ – tomer

也许另一个班级对元素有更高的优先级。尝试删除fa-5x类。如果它仍然无法检查元素并查看哪个规则真的影响它。 –

答

字体真棒图标只是与其他字体相同，您可以将CSS应用于它们。

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

这确实有用，但是由于您正在放大该类的所有图标。 –

你是正确的课程，当你使用任何框架或插件时，额外的课程总是很好的做法。我只是简单地让他申请CSS。 –

是的我试图防止OP在他不知道的情况下吓坏了！你得到一个投票我btw， –

如何使字体真棒图标大？

相关推荐