Question

我正在使用Ionicons（http://ionicons.com/）而且我是css的新手。我想知道是否可以在Icon的右上角覆盖一个标有“new”的横幅。

这样做有简单/标准的方法吗？（对于ionicon或favicon）

谢谢！

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>

在Ionicon图标上叠加'新'横幅

1 个答案: