css什么都不做 - 引用问题 - 字体真棒图标 - 反应

问题描述

当这个问题得到回答时，我可能会觉得很傻，但不知道为什么这不起作用？ FA 图标出现但无法在 CSS 中引用它以进行更改。继续尝试不同的事情并且无法在我的 css 中的 NavBar 组件中更改我的图标？也尝试过导航 .burger。有什么关于我在这里犯的愚蠢错误的提示吗？

在导航栏中

import React from 'react';
import {NavLink,Link} from 'react-router-dom'

function NavBar() {

    return(
        <nav>
        <ul activeclassname="nav">
            <li id ="name">
                <Link exact to="/">Barry Jones</Link>
            </li>
            <li activeclassname="active">
                <NavLink exact to="/">HOME</NavLink>
            </li>
            <li activeclassname="active">
                <NavLink exact to="/about">ABOUT</NavLink>
            </li>
            <li activeclassname="active">
                <NavLink exact to="/portfolio">PROJECTS</NavLink>
                
            </li>
            <li activeclassname ="active">
                <NavLink exact to="/cv">CV</NavLink>
            </li>
            <li activeclassname = "active">
                <NavLink exact to="/blog">BLOG</NavLink>
            </li>
    
            <i className="fas fa-bars burger"></i>
        </ul>
    </nav>     

    );
}

 
export default NavBar;

顺便说一句，不知道为什么我添加了导航标签 - 以前没有这个，但开始跟着教程一起工作，然后尝试看看它是否有所作为。

是的顺便说一句，我确实想要酒吧而不是汉堡包 - 我不知道为什么我称它为汉堡包哈哈。

CSS（我不能让它做任何事情 - 什么都不做）

   .burger{
        font-size: 400px;
      }

感谢花时间回答这个问题的人，因为所有信息都很有帮助。原来，我的 css 意外嵌套在媒体查询中，并且在屏幕尺寸更改时确实发生了变化。只是一个愚蠢的错误！

解决方法

如果您使用的是最新的字体，那么汉堡图标的语法是 <i class="fas fa-hamburger"></i> 链接：https://fontawesome.com/v5.15/icons/hamburger?style=solid

,

Font Awesome 有一个官方的 React 组件来轻松制作图标 https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

,

您也可以尝试直接在图标元素中添加大小

<i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/sizing-icons