为什么我的 Font-Awesome 图标在点击时会变大？答案

【问题标题】：Why are my Font-Awesome Icons Increasing Size When Clicked?为什么我的 Font-Awesome 图标在点击时会变大？
【发布时间】：2022-01-03 18:04:28
【问题描述】：

我有 MDBootstrap 页脚，我已在 App.js 中将其制成 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; */
}

以下是正在发生的事情的图片：

【问题讨论】：

标签： reactjs font-awesome

【解决方案1】：

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

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

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

【讨论】：

感谢您的回复。我也安装了引导程序，我对如何将链接添加到头部的 CSS 有点困惑。我找到了它正在使用的这个：use.fontawesome.com/releases/v5.13.0/css/all.css">
@Miller42 请从沙盒中查看公用文件夹的 index.html 文件。或者，使用下面的代码``` cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/…" rel="stylesheet" /> cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.0/mdb.min.css " rel="stylesheet"/> ```

【解决方案2】：

试试这个。

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

【讨论】：