提问人：Michael 提问时间：10/15/2023 最后编辑：herrstrietzelMichael 更新时间：10/15/2023 访问量：37
在引导页面中替换 fontawesome 图标时 google-material-icons 的垂直对齐
vertical alignment of google-material-icons when replacing fontawesome icons in a bootstrap page
问：
我有一个html页面，用于布局（例如按钮）和图标。bootstrap 和 fontawesome 都通过 CDN 包含在内。bootstrap 5.3fontawesome 6.4
我想过渡到最新的字体，同时保持引导。
我做了一个既有图标又有文本的实验，并且在谷歌材料图标和其他图标之间出现了错误。
我尝试比较和复制所有差异，但无济于事。
我可以通过将它全部包装在带有样式的 .它奏效了（示例如下）。如果没有其他方法，我会这样做。但是，我更喜欢 1.了解它发生的原因，以及 2.在 SCSS 全局级别修复一次。google material iconsdivdisplay:flex; align-items:center
下面的独立 html 文件显示了按钮的图标对齐问题，以及我迄今为止最好的解决方案，即额外的 div 包装器。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<button>
<i class="fa fa-sign-in-alt"></i>
<i class="material-icons">login</i>
Login
</button>
<button style="display:flex; align-items:center">
<i class="fa fa-sign-in-alt"></i>
<i class="material-icons">login</i>
Login
</button>
<button class="btn btn-lg btn-primary ">
<i class="fa fa-sign-in-alt"></i>
<i class="material-icons">login</i>
Login
</button>
<button class="btn btn-lg btn-primary ">
<div style="display:flex; align-items:center">
<i class="fa fa-sign-in-alt"></i>
<i class="material-icons">login</i>
Login
</div>
</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>答：
1赞
herrstrietzel
10/15/2023
#1
材质图标在放置在字体基线处的 512x512 正方形中统一居中。
与 fontAwesome 或常规（字母）字体不同，可见的字形/图标形状在视觉上与基线不对齐
作为解决方法，您可以添加基线偏移类，例如使用转换。translateY()
.material-icons-baseline {
transform: translateY(0.2em)
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<h3>Baseline shift</h3>
<p>
<i class="material-icons material-icons-baseline">home</i> Home
<i class="material-icons material-icons-baseline">login</i> Login
</p>
<h3>No Baseline shift</h3>
<p>
<i class="material-icons">home</i> Home
<i class="material-icons">login</i> Login
</p>
<button>
<i class="fa fa-sign-in-alt"></i>
<i class="material-icons material-icons-baseline">login</i>
Login
</button>
<button style="display:flex; align-items:center">
<i class="fa fa-sign-in-alt"></i>
<i class="material-icons">login</i>
Login
</button>
<button class="btn btn-lg btn-primary ">
<i class="fa fa-sign-in-alt"></i>
<i class="material-icons material-icons-baseline">login</i>
Login
</button>
<button class="btn btn-lg btn-primary ">
<div style="display:flex; align-items:center">
<i class="fa fa-sign-in-alt"></i>
<i class="material-icons">login</i>
Login
</div>
</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
评论