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

Question

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

有没有一种简单/标准的方法来做到这一点？（对于离子图标或网站图标）

谢谢！

Answer 1

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

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