如何在使用 font awesome 时更改字体大小？
Posted
技术标签:
【中文标题】如何在使用 font awesome 时更改字体大小？【英文标题】：How can I change font size while using font awesome? 【发布时间】：2017-09-10 04:06:02 【问题描述】：所以我创建了一个个人简历网站，偶然发现了一些非常酷的东西：font awesome，它以文本形式提供图形，允许您通过 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>
【问题讨论】：
How to style icon color, size, and shadow of Font Awesome Icons的可能重复 【参考方案1】：这些图标是由.fa 上的:before psuedoelements 制作的，因此如果您针对: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;
【讨论】：
No upvote nothing?，这应该被接受的答案，因为这个答案到底是什么操作问【参考方案2】：这不是调整字体真棒图标大小的首选方式。我也不确定是否可以使用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/
Font-Awesome 有预制的类内置包含font-size 属性。无需编写自定义 CSS 来覆盖图标的字体大小。只需使用内置类。
【讨论】：
谢谢，这很有帮助 font-awesome 图标可以通过简单地使用 font-size 来调整大小——它是一种字体，而不是图形。使用内置类只是通过类应用它。此外，除非您使用大量的 FA 图标，否则只需添加所需的图标而不是完整的 CSS 会有所帮助。 FA 工作总共需要大约 10 行 CSS，加上 fontawesome 字体加载器，以及每个类的内容：。【参考方案3】：这是重新调整字体大小的一种方法。但是，如果这些尺寸都没有你想要的怎么办？那么你确实需要使用字体大小。
您的字体大小未呈现的原因是.fa class 上有一个font-size:inherit;。这就是它被覆盖的原因。http://jsfiddle.net/1Lf0rowp/43/
但是，上面的代码更高效，因为它们内置了字体大小来处理类。
【讨论】：
以上是关于如何在使用 font awesome 时更改字体大小？的主要内容，如果未能解决你的问题，请参考以下文章
如何在window Form中使用Font Awesome？