为什么单击时我的 Font-Awesome 图标会变大？

Question

我在 App.js 中将 MDBootstrap 页脚制作成 React 组件。我正在使用 Font-Awesome，当我单击图标时，它们的大小会不断增加。我不确定为什么？它们也是圆形边缘（带有蓝色边框），当它应该像我正在使用的这个页脚中那样被圈起来时：https://mdbootstrap.com/snippets/standard/mdbootstrap/2885115?view=side

这是我的 App.js:

   function App() {
  return (
    <div className="App">
      <ParticleBackground />
      <CenterTitle />
      <Footer />
      {/* <FontAwesomeIcon icon={["fas", "ellipsis-v"]}  opacity="0.1" color="green" size={["10x"]} className="fa-icon img-fluid" max-width="100%" /> */}
    </div>
  );
}

function Footer() {
  return (
          // {/* Remove the container if you want to extend the Footer to full width. */}
          <div id="footer">
          <footer className="text-center text-lg-start" style={{backgroundColor: '#000000'}}>
            <div className="container d-flex justify-content-center py-3">
              <a href="https://facebook.com">
              <button type="button" className="btn btn-primary btn-lg btn-floating mx-2" style={{backgroundColor: '#54456b'}} >
                <i className="fab fa-facebook-f" />
              </button>
              </a>
              <button type="button" className="btn btn-primary btn-lg btn-floating mx-2" style={{backgroundColor: '#54456b'}}>
                <i className="fab fa-youtube" />
              </button>
              <button type="button" className="btn btn-primary btn-lg btn-floating mx-2" style={{backgroundColor: '#54456b'}}>
                <i className="fab fa-instagram" />
              </button>
              <button type="button" className="btn btn-primary btn-lg btn-floating mx-2" style={{backgroundColor: '#54456b'}}>
                <i className="fab fa-twitter" />
              </button>
            </div>
            {/* Copyright */}
            <div className="text-center text-white p-3" style={{backgroundColor: 'rgba(0, 0, 0, 0.2)'}}>
              © 2021 Copyright:
              <a className="text-white" href=""> Pioneer TM</a>
            </div>
            {/* Copyright */}
          </footer>
        </div>
        // {/* End of .container */}
  );
}      

export default App;

这是我的 App.css:

#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  /* background:#6cf; */
}

Answer 1

试试这个。

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  left: 0;
}

Answer 2

我试图在沙盒上复制你的错误，但上面提到的代码似乎没有错误。

https://codesandbox.io/s/relaxed-field-jps5x?file=/src/App.js

对于圆形按钮，您似乎使用了 bootstrap 而不是 MDBootstrap 5。

为什么单击时我的 Font-Awesome 图标会变大？

Why are my Font-Awesome Icons Increasing Size When Clicked?

reactjs

font-awesome