如何在使用字体真棒时更改字体大小？

所以我开始了一个个人简历网站，我偶然发现了一些非常酷的东西：字体真棒，它以文本形式提供图形，允许您通过CSS向其添加字体效果。我的问题是，一切都很好，直到我试图改变字体大小，无论出于何种原因它都不会改变。你有什么想法？我在这里也较新，我已阅读如何发布帖子，但如果我做错了，请让我知道。如何在使用字体真棒时更改字体大小？

*{ 
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
    list-style: none; 
} 

.toggle_menu{ 
    position: fixed; 
    padding: 15px 20px 15px 15px; 
    margin-top: 70px; 
    color: white; 
    cursor: pointer; 
    background-color: #648B79; 
    z-index: 1000000; 
    font-size: 8em; 
}  

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Stylesheets --> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <!-- Fonts --> 
    <link href='https://fonts.googleapis.com/css? 
family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'> 
    <!-- Scripts --> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="js/menu.js"></script> 
    <script src="https://use.fontawesome.com/53686df37f.js"></script> 
    <title>Joseph Kuzera</title> 
</head> 
<body> 
    <i class="fa fa-bars toggle_menu"></i> 
</body> 
</html>

来源

2017-04-13 BestThereEverWas

[如何样式图标的颜色，大小的可能的复制，和字体真棒图标的阴影]（http://stackoverflow.com/questions/12272372/how-to-style-icon-color-size-and-shadow-of-font-awesome-icons） – TylerH

这不是大小字体真棒图标..我不知道它可以与任何font-size做的首选方式。每字体 - 真棒示例页面：

<i class="fa fa-camera-retro fa-lg"></i> fa-lg 
<i class="fa fa-camera-retro fa-2x"></i> fa-2x 
<i class="fa fa-camera-retro fa-3x"></i> fa-3x 
<i class="fa fa-camera-retro fa-4x"></i> fa-4x 
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

http://fontawesome.io/examples/

来源

2017-04-13 21:59:36 Zak

谢谢你这是非常有帮助 – BestThereEverWas

字体真棒图标可以通过简单地使用字体大小来确定大小 - 这是一个字体，而不是图形。使用内置类只是通过一个类来应用。另外，除非你使用大量的FA图标，只需添加所需的图标，而不是完整的CSS将有所帮助。 FA工作所需的总数约为10行CSS，加上丰富的字体加载器，每个类都包含内容：。 – junkfoodjunkie

即重新大小的一种方式的字体。但是，如果这些尺寸都不符合你的要求呢？那么你确实需要使用字体大小。

字体大小未呈现的原因是因为.fa class上有一个font-size:inherit;。这就是它被覆盖的原因。 http://jsfiddle.net/1Lf0rowp/43/

但是，上面的代码更高效，因为它们内置了字体大小来处理类。

来源

2017-04-13 22:06:52 Jorden1337

的图标由:before psuedoelements在.fa做，所以如果你有针对性的:before代替.fa它会直接到达的图标：

.toggle_menu{ 
position: fixed; 
padding: 15px 20px 15px 15px; 
margin-top: 70px; 
color: white; 
cursor: pointer; 
background-color: #648B79; 
z-index: 1000000; 
} 
.toggle_menu:before { 
font-size: 8em; 
}

来源

2017-04-13 22:24:56 TricksfortheWeb

没有什么不满？，这应该被接受的答案，因为这个答案究竟是什么问 – user2860957

如何在使用字体真棒时更改字体大小？

回答

相关问题