在 Ionicon 图标上覆盖“新”横幅

【问题标题】：overlay 'new' banner over Ionicon icon在 Ionicon 图标上覆盖“新”横幅
【发布时间】：2016-07-24 11:07:42
【问题描述】：

我正在使用 Ionicons (http://ionicons.com/)，而且我是 CSS 新手。我想知道是否可以在图标的右上角覆盖一个标有“新”的横幅。

有没有一种简单/标准的方法来做到这一点？（对于 ionicon 或 favicon）

谢谢！

【问题讨论】：

你有没有尝试过？

标签： html css favicon ionicons

【解决方案1】：

只需将以下 new 类添加到您想要的任何图标：

.new:after {
      content: 'new';
      position: relative;
      top: -10px;
      left: -2px;
      background-color: tomato;
      font-size: xx-small;
 }

您可以根据需要更改颜色和位置并添加任何其他样式。

.new:after {
  content: 'new';
  position: relative;
  top: -10px;
  left: -2px;
  background-color: tomato;
  font-size: xx-small;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<i class="ion-ios-flask new"></i>

【讨论】：

这应该是答案。不过，这些值可能会因您的风格而异。