修复浏览器缩放图标大小（使用Chrome）

Question

我刚刚在我的网络项目中发现了一个问题，我无法找到解决方法。 我看到了关于精灵和博客的一些内容，提到了这个问题。 一切看起来都很好100％但是当我用我的浏览器放大时，图标越来越大，打破了布局。

这就是我的CSS看起来像

.Sidebar {
position: fixed;
background-color: #262626;
width: 5%;
height: 100%;
z-index: 1;
}
.Sidebar-Icon {
align-items: center;
font-size: 30px;

}
.Sidebar-Icon .SDIcon {
 text-decoration-line: none;
}
.Sidebar-Icon li {
list-style-type: none;
}
ul.Sidebar-Icon {
cursor: pointer;
display: flex;
padding: 0;
flex-direction: column;
align-items: center;
flex: 1;
margin: 0;
height: 100%;
position: relative;
}
.Sidebar-Icon li:first-child{
padding: 20px 0 0 0;
}
.Sidebar-Icon li:first-child,
.Sidebar-Icon li:last-child{
margin-bottom:auto;
}
.sb-i{
color: #999AAA !important; // shadow AAABBB
}

Html（Angular）代码

<div class="Sidebar" [@collapse]="collapse">
<div class="Sidebar-Inner">

<div class="profileimg"></div>

</div>
<ul class="Sidebar-Icon ">    
  <li><a  class="sb-i" (click)="toggleCollapse()">
  <i class="fas fa-ellipsis-v" ></i></a></li>
<li><a class="sb-i"href="javascript:void(0)"><i class="fas fa-home"></i></a>
</li>
<li><a class="sb-i"href="javascript:void(0)"><i class="fas fa-child"></i>
</a></li>
<li><a class="sb-i"href="javascript:void(0)"><i class="fab fa-accessible-
icon"></i></a></li>
<li><a class="sb-i"href="javascript:void(0)"><i class="fas fa-cog"></i></a>
</li>
 </ul>
</div>  

问题的例子（Zoomlevel on 500％）：

Answer 1

HTML：

<div class="Sidebar" [@collapse]="collapse">
    <div class="Sidebar-Inner">

        <div class="profileimg"></div>

    </div>
    <ul class="Sidebar-Icon ">
        <li><a  class="sb-i" (click)="toggleCollapse()">
            <i class="fas fa-ellipsis-v" ></i></a></li>
        <li><a class="sb-i" href="javascript:void(0)"><i class="fas fa-home"></i></a>
        </li>
        <li><a class="sb-i" href="javascript:void(0)"><i class="fas fa-child"></i>
        </a></li>
        <li><a class="sb-i" href="javascript:void(0)"><i class="fab fa-accessible-
icon"></i></a></li>
        <li><a class="sb-i" href="javascript:void(0)"><i class="fas fa-cog"></i></a>
        </li>
    </ul>
</div>

CSS：

.Sidebar {
    position: fixed;
    background-color: #262626;
    width: 5%;
    height: 100%;
    z-index: 1;
}
.Sidebar-Icon {
    align-items: center;
    font-size: 30px;

}
.Sidebar-Icon .SDIcon {
    text-decoration-line: none;
}
.Sidebar-Icon li {
    list-style-type: none;
}
ul.Sidebar-Icon {
    cursor: pointer;
    display: flex;
    padding: 0;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin: 0;
    height: 100%;
    position: relative;
}
.Sidebar-Icon li:first-child{
    padding: 20px 0 0 0;
}
.Sidebar-Icon li:first-child,
.Sidebar-Icon li:last-child{
    margin-bottom:auto;
}
.sb-i{
    color: #999AAA !important; // shadow AAABBB
}

.sb-i i{
    width: 100%;
    height: auto;
}

.sb-i svg {
    width: 100% !important;
    height: auto !important;
}