Fix position of elements when hovering on other elements

try this instead,

use transform scale property instead of change font-size in hover

li a:hover {
    text-decoration: none;
}

i.s-m-i {
    color: black;
    font-size: 30px;
    transition: all .3s ease-in-out;
}

i.s-m-i:hover {
    color : blue;
    transform: scale(1.3);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
  <br>
  <ul class="list-unstyled text-center">
      <li class="d-inline">
          <a href="#">
              <i class="fa fa-telegram s-m-i"></i>
          </a>
      </li>
      <li class="d-inline ml-3">
          <a href="#">
              <i class="fa fa-instagram s-m-i"></i>
          </a>
      </li>
      <li class="d-inline ml-3">
          <a href="#">
              <i class="fa fa-github s-m-i" ></i>
          </a>
      </li>
      <li class="d-inline mr-1 ml-3">
          <a href="#">
              <i class="fa fa-linkedin s-m-i" ></i>
          </a>
      </li>
  </ul>


</html>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top