对齐css和html中的图标

Question

I have tried various methods in css to align the icons with the text but the icons appear slightly shifted up from the text baseline.我在 css 中尝试了各种方法来将图标与文本对齐，但图标看起来从文本基线略微上移。

I address the icons with:我用以下方式处理图标：

 /* Style the full height sidebar */ .sidebar { height: 100%; /* Sidebar will take the full screen height */ width: 180px; /* Sidebar width */ position: absolute; /* Position the sidebar relative to the browser window */ z-index: 1; /* Appears on top of other elements */ top: 0px; /* Top margin of 0px */ left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */ padding: 10px 5px 5px 10px; /* Padding 15px */ background-color: #111; /* Background color */ overflow-x: hidden; } .sidebar a { text-decoration: none; /* This stops the underline on link elements */ font-size: 20px; /* Set font size of sidebar links */ color:#818181; /* Set font color of sidebar links */ display: block; padding: 10px; /* Same as the sidebar */ } .sidebar a:hover { text-decoration: none; /* This stops the underline on link elements */ color: #f1f1f1; /* On mouse over change font color of sidebar links */ } .sidebar:hover { left: 0; /* On mouse over the sidebar should appear on screen */ } i { float: right; }

 <html> <head> <title>Master Tracker</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Load a font library --> <link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet"> <!-- Load an icon library --> <script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="sidebar"> <a href="#home"><i class="fa fa-fw fa-home"></i> Home </a> <a href="#archive"><i class="fas fa-archive"></i></i> Archive </a> <a href="#newfile"><i class="fas fa-folder-open"></i> New File </a> <a href="#analytics"><i class="fas fa-chart-pie"></i> Analytics </a> <a href="#contacts"><i class="fas fa-address-book"></i> Contacts </a> <a href="#putoutfire"><i class="fas fa-dumpster-fire"></i> Hero </a> <a href="#search"><i class="fas fa-search"></i> Search </a> <a href="#help"><i class="fas fa-life-ring"></i> Help </a> </div> </body> </html>

It is strange because it looks good in the post editor but not when I run it in browser for VS code.这很奇怪，因为它在帖子编辑器中看起来不错，但当我在浏览器中为 VS 代码运行它时就不行了。 Any help on how to align icons appreciated.任何有关如何对齐图标的帮助表示赞赏。

Answer 1

Are you looking for something like this?你在寻找这样的东西吗？

I applied text-align: right to each icon.我对每个图标应用了text-align: right 。 - Some icon shapes/sizes are bigger than others so maybe adjust them individually until you're happy with the result. - 某些图标形状/大小比其他图标大，因此可以单独调整它们，直到您对结果满意为止。

 /* Style the full height sidebar */ .sidebar { height: 100%; /* Sidebar will take the full screen height */ width: 180px; /* Sidebar width */ position: absolute; /* Position the sidebar relative to the browser window */ z-index: 1; /* Appears on top of other elements */ top: 0px; /* Top margin of 0px */ left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */ padding: 10px 5px 5px 10px; /* Padding 15px */ background-color: #111; /* Background color */ overflow-x: hidden; } .sidebar a { text-decoration: none; /* This stops the underline on link elements */ font-size: 20px; /* Set font size of sidebar links */ color:#818181; /* Set font color of sidebar links */ display: block; padding: 10px; /* Same as the sidebar */ } .sidebar a:hover { text-decoration: none; /* This stops the underline on link elements */ color: #f1f1f1; /* On mouse over change font color of sidebar links */ } .sidebar:hover { left: 0; /* On mouse over the sidebar should appear on screen */ } i { float: right; }

 <html> <head> <title>Master Tracker</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Load a font library --> <link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet"> <!-- Load an icon library --> <script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="sidebar"> <a href="#home"><i style="text-align: right;" class="fa fa-fw fa-home"></i> Home </a> <a href="#archive"><i style="text-align: right;" class="fas fa-archive"></i></i> Archive </a> <a href="#newfile"><i style="text-align: right;" class="fas fa-folder-open"></i> New File </a> <a href="#analytics"><i style="text-align: right;" class="fas fa-chart-pie"></i> Analytics </a> <a href="#contacts"><i style="text-align: right;" class="fas fa-address-book"></i> Contacts </a> <a href="#putoutfire"><i style="text-align: right;" class="fas fa-dumpster-fire"></i> Hero </a> <a href="#search"><i style="text-align: right;" class="fas fa-search"></i> Search </a> <a href="#help"><i style="text-align: right;" class="fas fa-life-ring"></i> Help </a> </div> </body> </html>

Answer 2

This will be help you.这会帮助你。
I noticed images are not the same size.我注意到图像的大小不一样。 I adjusted the size and changed home's class.我调整了大小并更改了家庭的课程。

 /* Style the full height sidebar */ .sidebar { height: 100%; /* Sidebar will take the full screen height */ width: 180px; /* Sidebar width */ position: absolute; /* Position the sidebar relative to the browser window */ z-index: 1; /* Appears on top of other elements */ top: 0px; /* Top margin of 0px */ left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */ padding: 10px 5px 5px 10px; /* Padding 15px */ background-color: #111; /* Background color */ overflow-x: hidden; } .sidebar a { text-decoration: none; /* This stops the underline on link elements */ font-size: 20px; /* Set font size of sidebar links */ color:#818181; /* Set font color of sidebar links */ display: block; padding: 10px; /* Same as the sidebar */ } .sidebar a:hover { text-decoration: none; /* This stops the underline on link elements */ color: #f1f1f1; /* On mouse over change font color of sidebar links */ } .sidebar:hover { left: 0; /* On mouse over the sidebar should appear on screen */ } i { float: right; width:20px; height:20px; }

 <html> <head> <title>Master Tracker</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Load a font library --> <link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet"> <!-- Load an icon library --> <script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="sidebar"> <a href="#home"><i class="fas fa-home"></i> Home </a> <a href="#archive"><i class="fas fa-archive"></i></i> Archive </a> <a href="#newfile"><i class="fas fa-folder-open"></i> New File </a> <a href="#analytics"><i class="fas fa-chart-pie"></i> Analytics </a> <a href="#contacts"><i class="fas fa-address-book"></i> Contacts </a> <a href="#putoutfire"><i class="fas fa-dumpster-fire"></i> Hero </a> <a href="#search"><i class="fas fa-search"></i> Search </a> <a href="#help"><i class="fas fa-life-ring"></i> Help </a> </div> </body> </html>

I changed these codes:我改变了这些代码：

<a href="#home"><i class="fa fa-fw fa-home"></i> Home </a><!--deleted fa-fw and fa-->
<a href="#home"><i class="fas fa-home"></i> Home </a><!--inserted fas-->

and I insert this code:我插入这个代码：

i {
float: right;
width:20px;//inserted
height:20px;//inserted
}

对齐css和html中的图标

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-10-23 16:07:18

解决方案2
0 2020-10-23 16:14:29

对齐css和html中的图标

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-10-23 16:07:18

解决方案2 0 2020-10-23 16:14:29

解决方案1
0 已采纳 2020-10-23 16:07:18

解决方案2
0 2020-10-23 16:14:29