ReactJS FontAwesome 图标呈现不同大小

Posted 2023-02-22

【中文标题】ReactJS FontAwesome 图标呈现不同大小

【英文标题】：ReactJS FontAwesome icons rendering different sizes

【发布时间】：2020-08-04 18:40:21

【问题描述】：

我决定第一次尝试网页设计。

我决定试试 React。然后我发现 React 有一个 FontAwesome 库。凉爽的！但是，我的图标在页脚上呈现不同的大小，我不知道为什么。我在这上面花了几天时间，但我没有想法。

我已经尝试使用内置的 size 属性来操作图标。我也尝试过使用 CSS 手动调整和移动图标的大小，但这对我也不起作用。最后，我尝试将图标容器更改为一些不同的标签。我检查了 Stack Overflow、React 博客，并阅读了 FontAwesome API 文档，试图找出我做错了什么，但我一直找不到解决方案。

这似乎与图标的“路径”属性有关，但我对 svg 图标了解不多，无法弄清楚为什么会这样。有人可以看看我的代码吗？我很好奇这是一个库问题还是一个实现问题（我假设是后者，因为我不知道我在做什么）。

这是我的页脚（图标数组作为道具从 App 组件传递到页脚组件）：

    import React from "react";
    import  Container, Row, Col  from "react-bootstrap";
    import  FontAwesomeIcon  from "@fortawesome/react-fontawesome";

    const Footer = props => 
      return (
        <footer className="footer-container">
          <Container fluid="true">
            <Row>
              <Col sm>
                <div className="col-left">
                  <h5>Contact</h5>
                  <span className="icon-area">
                    props.icons.map((icon, index) => (
                      <a
                        href=icon.link
                        key=index
                        // className=`$icon.name-svg`
                      >
                        <FontAwesomeIcon
                          key=index
                          icon=icon.icon
                          color="white"
                          fixedWidth //I've tried sizes 2x, 3x instead
                          // className=`$icon.name-svg`
                        />
                      </a>
                    ))
                  </span>
                </div>
              </Col>
              <Col sm>
                <h6>some more stuff will go here</h6>
              </Col>
              <Col sm>
                <h6>and even more stuff here</h6>
              </Col>
            </Row>
            <Row>
              <div className="row2-copyright">
                <hr />
                <h6>© 2020 Copyright Stuff</h6>
              </div>
            </Row>
          </Container>
        </footer>
      );
    ;

    export default Footer;

这是我的样式表（注释掉我尝试过的一些不同的东西）：

$font: "Roboto";

.footer-container 
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: $font;
  padding-top: 20px;
  background-color: #161515;

  .col-left 
      text-align: center;
      color: #fff;

      .icon-area 
          align-self: center;
          display: inline-flex;
          padding: 2px;
          font-size: 2rem;

        //   svg 
        //       width: 28px;
        //       height: 28px;
        //   

          // .discord-svg 
          //     margin-top: 0.2rem;
          // 
          // .linkedin-svg 
          //     margin-top: 0.1rem;
          // 
          // .envelope-svg 
          //     margin-top: 0.1rem;
          // 
      

      h5 
          text-transform: uppercase;
          font-size: 1.5rem;
      
  

  .row2-copyright 
      text-align: center;
      width: 100%;
      color: #fff;
      padding: 0.5rem;

      h6 
          margin: 0;
      

      hr 
          background-color: #fff;
      
  

And here is my code sandbox。

【问题讨论】：

大概你在这里打错了：@fortawesome/react-fontawesome。 “堡垒”应该是“字体”。

你会这么认为，但它实际上是“令人敬畏的”。不要问我为什么。

哦，对了！我猜“堡垒”的意思是“家”——第一部分大概与 GitHub 上项目的用户名匹配。

【参考方案1】：

包含图标的锚标签确实具有相同的宽度和高度（width 40px, height 48px），以及字体真棒图标（width: 40px, height 32px）所以我猜你的问题是眼睛缺乏一致性，因为每个字体真棒图标都有不同的形状。 如果你想改变图标的​​大小，你只需要修改font-size，因为字体真棒元素是实际的fonts。 我在下面编辑了您的代码沙箱（所选字体大小是一个示例，您当然可以根据自己的方式更改它们）。我唯一更改的内容如下：

从.icon-area 中删除了font-size 属性 在.icon-area（属性：align-items）处添加了垂直对齐（中心） 为每个锚标记添加了不同的font-size，这样字体超棒的图标看起来会有些相似。

这是edited sandbox（更改仅涉及 styles.scss 文件）：

【讨论】：

非常感谢您的浏览。图标的顶部对齐，这是一个巨大的改进。我很好奇，为什么将字体大小放在根容器中是个坏主意？我的css很差。非常感谢！

@FuegoJohnson 不客气：) 从技术上讲，这不是一个坏主意，只是由于图标的形状，您没有得到令人满意的结果。如果它们是一致的——例如，都是正方形的——那就没问题了。我们专门针对每个孩子，以便更好地控制大小并更改对齐方式以给人视觉等效的印象。