图标没有完全居中

Question

我正在使用语义 UI 图标并尝试组合多个图标来创建一个新图标。使用大图标的时候还不错，但是使用小图标的时候，就显得图标不完全居中了。

下面，我们看到图标越小，水平对齐越不正确

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/icon.css">
  </head>
  <body>
  
    <i class="huge icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="big icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="large icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>
  </body>
</html>

Answer 1

默认情况下定义的小边距会导致此问题，只需将其删除即可：

i.icons .icon:first-child {
  margin-right:0;
}

完整代码：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/icon.css">
<style>
i.icons .icon:first-child {
  margin-right:0;
}
</style>
</head>
  <body>
  
    <i class="huge icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="big icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="large icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>
  </body>
</html>

图标没有完全居中

Icons are not perfectly centered

css

semantic-ui