【问题标题】: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>

【讨论】:

  • 这应该是答案。不过,这些值可能会因您的风格而异。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-10-18
  • 2011-09-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多