ReactJS FontAwesome icons rendering different sizes

Question

I decided to try my hand at web design for the first time.

I decided to try out React. Then I found that there is a FontAwesome library for React. Cool! However, my icons are rendering at different sizes on my footer and I have no clue why. I've spent a few days on this and I am out of ideas.

I've tried manipulating the icons using the built-in size prop. I've also tried manually sizing and moving the icons using CSS and that hasn't worked for me, either. Lastly, I've tried changing the icon container to some different tags. I've checked around Stack Overflow, React blogs, and read the FontAwesome API docs to try and find out what I am doing wrong, but I have been unable to find a solution.

It seems to be related to the icon's "path" attribute, but I don't know enough about svg icons to figure out why that is. Can someone please take a look at my code? I'm curious if this is a library issue or an implementation issue (I assume its the latter, as I have no clue what I'm doing).

Here is my footer (icon array passed as a prop to the Footer component from App component):

    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;

And here is my stylesheet (commented out some different things I've tried):

$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.

Answer 1

The anchor tags that contain the icons do have the same width and height (width 40px, height 48px), as well as the font awesome icons (width: 40px, height 32px) so I guess that your problem is the lack of consistency in the eye, since each font awesome icon has a different shape. If you want to change the size of the icons, you just need to modify font-size, since font awesome elements are actual fonts. I have edited your code sandbox below (the selected font sizes are an example, you can change them at your own accordance of course). The only things that I have changed are the following:

1. Removed the font-size property from the .icon-area
2. Added vertical alignment (center) at the .icon-area (property: align-items)
3. Added different font-size for each anchor tag so that the font awesome icons would look somehow similar.

Here's the edited sandbox (changes are concerning only the styles.scss file):