html - 如何在使用 font awesome 时更改字体大小?

标签 html css font-awesome

所以我开了一个个人简历网站,我偶然发现了一个非常酷的东西: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/

相关文章:

javascript - 使用jquery检查按钮是否被点击

php - 提交按钮以创建带有输入文本的 HTML 文件

css - 使用 Sass 和 Symfony2 的 Assetic 创建条件样式表的最佳方法是什么?

html - 单击 Bootstrap 下拉菜单时更改 Font Awesome 图标

java - 将不同的字体应用于android中按钮中的文本

html - 如何将图像放在背景图像之上

html - 网页高度在移动浏览器中被拉伸(stretch)

javascript - 同时进行提交按钮 POST 和 AJAX 调用?

javascript - CSS 如何禁用 window.onscroll?

Java FX 无法加载 Font Awesome 图标