Font Awesome 图标与 Bulma 菜单内的文本不对齐
[英]Font Awesome Icons do not align with text inside a Bulma menu
问题描述
当字体真棒图标添加到 Bulma 导航栏项目时，它们会与文本正确对齐。 但是，将相同的图标添加到 Bulma 菜单时，它们会错位。 如何在不使用自定义 CSS 的情况下将图标与 Bulma 菜单中的文本正确对齐？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <title>Test</title> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" rel="stylesheet"> <style> *:not(path):not(g) { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.05rem hsla(210, 100%, 100%, 0.5) !important; box-shadow: none !important; } </style> </head> <body> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span>- Test Correctly Aligned</span></a> </div> </div> </nav> <aside class="menu"> <ul class="menu-list"> <li><a><span class="icon"><i class="fas fa-book"></i></span><span>- Test Incorrectly aligned</span></a></li> <li><a><span class="icon"><i class="fas fa-book"></i></span><span>- Test Incorrectly aligned</span></a></li> </ul> </aside> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2020-09-20 04:42:31
因此，事实证明 bulma图标类与较新的字体真棒版本并不真正兼容。 解决方案是让 fontawesome 类接管。 删除 .icon 类并添加 fa-fw 后，图标完美对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <title>Test</title> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" rel="stylesheet"> <style> *:not(path):not(g) { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.05rem hsla(210, 100%, 100%, 0.5) !important; box-shadow: none !important; } </style> </head> <body> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span>- Test Correctly Aligned</span></a> </div> </div> </nav> <aside class="menu"> <ul class="menu-list"> <li><a><span class="fas fa-book fa-fw"></span><span>- Test Incorrectly aligned</span></a> <li><a><span class="fas fa-book fa-fw"></span><span>- Test Incorrectly aligned</span></a> </ul> </aside> </body> </html>
将文本对齐到字体真棒图标
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.