html - 在 Ionicon 图标上覆盖 'new' 横幅

Question

我正在使用 Ionicons ( http://ionicons.com/ ) 并且我是 css 的新手。我想知道是否可以在图标的右上角覆盖一个标有"new"字样的横幅。

有没有一种简单/标准的方法可以做到这一点？ (无论是 ionic 图标还是网站图标)

谢谢!

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>