上一篇: css – LESS：使用变量继承下一篇:css – 允许容器上的不透明度,但...

css – 如何在Font Awesome符号顶部添加徽章？

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 如何在Font Awesome符号顶部添加徽章？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想在 Font Awesome符号(fa-envelopE)的顶部添加带有一些数字(5,10,100)的徽章.例如：

但是,我无法理解如何将徽章放在符号的顶部.我的尝试可以在这里找到：jsFiddle.

我想支持Twitter Bootstrap 2.3.2.

解决方法

这可以在没有额外标记的情况下完成,只需要一个新类(无论如何都会使用)和伪元素.

JSFiddle Demo

HTML

<i class="fa fa-envelope fa-5x fa-border icon-grey badge"></i>@H_607_15@ 
 CSS 
  
 *.icon-blue {Color: #0088cc}
*.icon-grey {Color: grey}
i {   
    width:100px;
    text-align:center;
    vertical-align:middle;
    position: relative;
}
.badge:after{
    content:"100";
    position: absolute;
    BACkground: rgba(0,255,1);
    height:2rem;
    top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:1px solid blue;
}@H_607_15@