使用 CSS 加入字体中的图标

Question

编辑： 出于保密原因，我不得不删除此主题。

我找到了答案：在下面的评论中，删除 position: absolute 中的 :after 元素。这样就可以了。

谢谢大家的帮助！

Answer 1

不要为所有图标提供 position: absolute。而是专门针对该元素指定它。

<div class="joined-icons">
  <i class="icon-test xs"></i>
</div>

在你的 SCSS 中：

.joined-icons {
  .icon-test {
    display: block;
    position: relative;
    &:before {
      content: '\F018';
      position: absolute;
    }
    &:after {
      content: '\F019';
      position: absolute;
    }
  }
}

以上代码只影响div.joined-icons内的所有图标。所以你会没事的。

使用 CSS 加入字体中的图标

join icons in a font with CSS

css

fonts

icons