对齐 css 和 html 中的图标

Question

我在 css 中尝试了各种方法来将图标与文本对齐，但图标看起来从文本基线稍微向上移动。

我用以下方式处理图标：

/* 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>

这很奇怪，因为它在 post 编辑器中看起来不错，但当我运行它在浏览器中用于 VS 代码时却不是。任何关于如何对齐图标的帮助表示赞赏。

Answer 1

您在找这样的东西吗？

我对每个图标应用了text-align: right。 - 有些图标 shapes/sizes 比其他图标大，因此可以单独调整它们，直到您对结果满意为止。

/* 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

这对你有帮助。
我注意到图像大小不一样。我调整了大小，改变了家的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>

我更改了这些代码：

<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-->

然后我插入这段代码：

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

对齐 css 和 html 中的图标

Aligning icons in css and html

html

css

fonts

alignment