CODEWITHSUNDEEP
reactjsfont-awesome
Miller42
Miller42

Reputation: 55

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

I have MDBootstrap footer that I've made into a React Component in App.js. I'm using Font-Awesome and when I click the icons they keep increasing in size. I'm not sure why? Also they are a rounded edge (with a blue border) when it should be circled like in this footer here that I'm using: https://mdbootstrap.com/snippets/standard/mdbootstrap/2885115?view=side

Here is my 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;

Here is my 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; */
}

Upvotes: 0

Views: 254

Answers (2)

Pragun Bajracharya
Pragun Bajracharya

Reputation: 28

I tried to replicate your error on the sandbox but it seems that there was no error with the above mentioned code.

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

For the rounded button, it seems like you have used bootstrap instead of MDBootstrap 5.

Upvotes: 1

Devdahcoder
Devdahcoder

Reputation: 34

try this.

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

Upvotes: 0

Related Questions