所以我开了一个个人简历网站,我偶然发现了一个非常酷的东西: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>
最佳答案
图标是由 .fa
上的 :before
伪元素制作的,因此如果您针对 :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;
}
关于html - 如何在使用 font awesome 时更改字体大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43402344/