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>