如何使响应式字体 Awesome 图标保持其尺寸？

Question

我有一个 div 可以在点击时扩展到 1.3 宽度和 1.02 高度，但我希望其中的响应图标保持其尺寸。目前，该图标会被拉伸和拉长以匹配其容器的尺寸 div。我想让它长大但又不失去原来的尺寸。

    
    $(document).ready(function(){
        $(".ico").click(function(){
            $(".active").removeClass("active");
            $(this).addClass("active");
        });
    });

    .bar {
        display: inline-block;
        font-size: 3vw;
        width: 7%;
    }
    .ico {
        background-color: #f8f8ff;
        line-height: 1.5;
        border-style: solid;
        text-align: center;
        border-width: 2px;
        border-color: #aeaf9d;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .active{
        transform-origin: left;
        transform: scale(1.3, 1.02);
        transition: 50ms;
        box-shadow: 2px 2px 10px -1px rgba(0,0,0,.3);
        z-index: 10;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bar">
    <div class="ico">
         <div class="twitter">
            <i style="color:#1DA1F2;" class="fab fa-twitter"></i>
         </div>
    </div>

    <div class="ico">
        <div class="youtube">
            <i style="color:#FF0000;" class="fab fa-youtube"></i>
        </div>
    </div>
</div>

Answer 1

对图标应用相反的缩放比例

$(document).ready(function() {
  $(".ico").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
  });
});

.bar {
  display: inline-block;
  font-size: 3vw;
  width: 7%;
}

.ico {
  background-color: #f8f8ff;
  line-height: 1.5;
  border-style: solid;
  text-align: center;
  border-width: 2px;
  border-color: #aeaf9d;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.active {
  transform-origin: left;
  transform: scale(1.3, 1.02);
  transition: 50ms;
  box-shadow: 2px 2px 10px -1px rgba(0, 0, 0, .3);
  z-index: 10;
}

.active i {
  transform: scale(calc(1/1.3), calc(1/1.02));
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bar">
  <div class="ico">
    <div class="twitter">
      <i style="color:#1DA1F2;" class="fab fa-twitter"></i>
    </div>
  </div>

  <div class="ico">
    <div class="youtube">
      <i style="color:#FF0000;" class="fab fa-youtube"></i>
    </div>
  </div>
</div>

如何使响应式字体 Awesome 图标保持其尺寸？

How to Make Responsive Font Awesome Icon Retain its Dimensions?

html

javascript

css

responsive-design

font-awesome