Transform scale slightly nudges Font Awesome icon

Question

I have a Font Awesome icon inside a parent div with display: flex which itself is inside a container div that's display: flex.

When I try transform: scale(1.2) on hover it slightly nudges the element:

https://jsfiddle.net/Daniel_Knights/gptyo3be/5/

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

i {
  cursor: pointer;
  transition: transform 0.2s;
}

i:hover {
  transform: scale(1.2);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

<div class="container">
  <div class="parent">
    <i class="fa fa-eye" id="single-item-eye"></i>
  </div>
</div>

Any ideas why this might be?

score 1 · Accepted Answer · answered Apr 16 '20 at 15:45

1

Use the SVG version instead and you won't have the issue. Scaling an SVG is better than scaling a text:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

svg {
  cursor: pointer;
  transition: transform 0.2s;
}

svg:hover {
  transform: scale(1.2);
}

<script  src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>

<div class="container">
  <div class="parent">
    <i class="fa fa-eye" id="single-item-eye"></i>
  </div>
</div>

Related: Why is text getting blurry and wobbles during 2d scale transform

answered Apr 16 '20 at 15:45

Temani Afif

245,468
26
309
415

It works in the fiddle but not on my website for some reason. Is there any other setup aside from linking the script tag? – Daniel_Knights Apr 16 '20 at 16:09
make sure you remove the CSS and keep on the script – Temani Afif Apr 16 '20 at 16:10
@Daniel_Knights also clear your cache, maybe you still see the old one – Temani Afif Apr 16 '20 at 16:10
I've done that and it works like in your fiddle but now all the other fontawesome icons on my page don't work – Daniel_Knights Apr 16 '20 at 16:13
@Daniel_Knights you are using pseudo element ? – Temani Afif Apr 16 '20 at 16:13
How do you mean? – Daniel_Knights Apr 16 '20 at 16:14
you are inserting some icon using ::before/::after? – Temani Afif Apr 16 '20 at 16:14
Not directly, no – Daniel_Knights Apr 16 '20 at 16:15
1

@Daniel_Knights also note that using the SVG mean that you no more have < i > but svg tag. Check this: https://stackoverflow.com/a/48753896/8620333 and https://stackoverflow.com/a/48608619/8620333 – Temani Afif Apr 16 '20 at 16:16

Transform scale slightly nudges Font Awesome icon

1 Answers1