Wierd Icon Behaviour

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  Hello Dalma!

  Nice project!

  I think I've figured it out what happened.

  I noticed that on your code you set the class .fa brands like this:

  .fa-brands {
      color: var(--blue);
      border: 1px solid var(--pale-blue);
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1rem;
  }
  

  Did you use bootstrap or other framework? I still don't undestand much about frameworks other than a little bit of Tailwind, but when I checked your code using chrome dev tools, this same class had the property display: inline-block by default.

  So there's a conflict there. You set display: flex; but the class has display: inline-block by dafault, so your setting does not work.

  When I removed display: inline-block from it, the icons were centered.

  I really hope it helps you. I'm talking about things I don't completely understand here, but I really hope it's useful for you.

  By the way, great job!

  Marked as helpful

  0

  ---

  

  NBD•240

  @bdal90Posted 11 months ago

  Hi Daniel,

  Thank you so much for checking it out for me. Indeed, you're right, the inline-block display overrides my flex display, but I still don't know how I could fix it. Even if I remove the display: inline-block in dev tools, I don't know how to remove it in my code editor. :/ I don't use any special framework, it's just pure CSS, I'll keep on trying and I hope I'll come up with something. :)

  Best,

  Dalma

  1

  

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  @bdal90

  I'm glad I could help! 😊

  And please let me know when you learn how to fix that!

  0

  

  NBD•240

  @bdal90Posted 11 months ago

  Hi Daniel,

  I managed to fix this bug, but I have absolutely no idea why it is working this way and the other way doesn't. I simply changed the div to a ul and wrapped each icon in an li and that's it. Here is what it looks like now:

  HTML:

  <ul class="social-media">
        <li><i class="fa-brands fa-facebook-f"></i></li>
        <li><i class="fa-brands fa-twitter"></i></li>
        <li><i class="fa-brands fa-instagram"></i></li>
    </ul>
  

  CSS:

  .social-media {
      display: flex;
      justify-content: space-between;
      min-width: 8.125rem;
  }
  
  li {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--blue);
      border: 1px solid var(--pale-blue);
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      font-size: smaller;
  }
  
  li:hover {
      background-color: var(--blue);
      color: white;
      cursor: pointer;
      transition: 0.7s;
  }
  

  Hope this can come in handy for you too, :)

  Cheers,

  Dalma

  1