CODEWITHSUNDEEP
htmlcss
Charlotte Harper
Charlotte Harper

Reputation: 41

CSS icon does not properly align

The SoundCloud icon on my website is not properly aligned with the icon in the center. This can be seen after scrolling down at https://intersexmusic.com How do I fix this? Code is below.

.fa {
    padding: 20px;
    font-size: 30px;
    width: 65px;
    height: 65px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
}

Upvotes: 1

Views: 1125

Answers (2)

Andy Hoffman
Andy Hoffman

Reputation: 19109

You can solve this by adding the following rules which will affect all icons in this area of the DOM. By absolutely positioning the icons within relative containers and accounting for their own width using negative translate(-50%, -50%) values, we can perfectly center the icons.

If you didn't include this line…

transform: translate(-50%, -50%);

…the icons would appear too far left and too far from the top. The reason is that when you position something top: 50%, the actual size of the item you're positioning is not considered in the calculation. That's why we need the transform: translate(-50%, -50%) line, to account for the actual dimensions of the item we're positioning.

.card-body .fa {
  position: relative;
}

.card-body .fa::before {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

enter image description here

Upvotes: 2

Parth
Parth

Reputation: 151

It seems SoundCloud icons need more space than what is left after the padding you applied on .fa class.

Try changing it from padding: 20px to padding: 17px 13px.

enter image description here

It aligns as above after changing padding.

Upvotes: 0

Related Questions