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

【问题标题】：css doing nothing - referencing issue - font awesome icon - reactcss什么都不做 - 引用问题 - 字体真棒图标 - 反应
【发布时间】：2021-07-09 18:00:25
【问题描述】：

当这个问题得到回答时，我可能会觉得很傻，但不知道为什么这不起作用？ FA 图标出现，但无法在 CSS 中引用它进行更改。继续尝试不同的事情并且无法在我的 CSS 中更改 NavBar 组件中的图标？也尝试过 nav .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 意外嵌套在媒体查询中，并且在屏幕尺寸更改时确实发生了变化。只是一个愚蠢的错误！

【问题讨论】：

带有FA图标的页面肯定应用了CSS？

标签： css reactjs font-awesome-5

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你也可以尝试直接在图标元素中添加大小，比如

<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

【讨论】：