如何使响应式字体真棒图标保持其尺寸？ [复制]答案

【问题标题】：How to Make Responsive Font Awesome Icon Retain its Dimensions? [duplicate]如何使响应式字体真棒图标保持其尺寸？ [复制]
【发布时间】：2020-11-18 22:20:36
【问题描述】：

我有一个 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>

【问题讨论】：

标签： javascript html css responsive-design font-awesome

【解决方案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>

【讨论】：