CODEWITHSUNDEEP
htmlcss
Gus Murphy
Gus Murphy

Reputation: 346

SVG not positioning as expected in parent element

I'm having difficulty vertically centering some SVGs from FontAwesome in a navigation component. I've recreated the problem in a much simpler example here. What I'm trying to achieve is to have the two icons and the text all vertically aligned regardless of their individual height. As you can see, the Apple logo is not quite at the same position as the other elements. I feel like maybe my problem lies in having everything nested in too many elements, but the SVGs also need to link to other pages, and I like to be able to have different spacing between the icons compared to between the icons and the title. Any advice is greatly appreciated!

.tool-bar {
  background-color: gray;
  display: flex;
  height: 3em;
  align-items: center;
}

.icons {
  display: flex;
  align-items: center;
  margin-left: 0.5em;
}

.icons a {
  margin-right: 0.2em;
  display: flex;
  align-items: center;
}

.icons a img {
  height: auto;
}
<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<div class="tool-bar">
  <a class="title">Title</a>
  <div class="icons">
    <a href="https://www.google.com/" target="_blank">
      <i class="fab fa-google"></i>
    </a>
    <a href="https://www.apple.com/" target="_blank">
      <i class="fab fa-apple"></i>
    </a>
  </div>
</div>

Upvotes: 0

Views: 211

Answers (1)

vvg
vvg

Reputation: 1213

Wrap the <i> element containing the fontawesome icons in a <div>. I have done that here in this snippet and added a style background red to show the div rendering. The issue is that in fontawesome icons, the Google G logo and the Apple logo don't appear proportionate although their containing divs are identical in sizes. That's partly why these don't look visually aligned. You can see this if you run the snippet.

.tool-bar {
  background-color: gray;
  display: flex;
  height: 3em;
  align-items: center;
}

.icons {
  display: flex;
  align-items: center;
  margin-left: 0.5em;
}

.icons a {
  margin-right: 0.2em;
  display: flex;
  align-items: center;
}

.icons a img {
  height: auto;
}
<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<div class="tool-bar">
  <a class="title">Title</a>
  <div class="icons">
    <a href="https://www.google.com/" target="_blank">
      <div style="background-color: red;">
      <i class="fab fa-google"></i>
       </div>
    </a>
    <a href="https://www.apple.com/" target="_blank">
      <div style="background-color: red;">
      <i class="fab fa-apple"></i>
      </div>
    </a>
  </div>
</div>

Upvotes: 1

Related Questions