如何添加徽章在字体真棒符号的顶部？ [英] How to add badge on top of font awesome symbol?

问题描述

我想在字体真棒符号顶部添加一些数字（5,10,100）的徽章（ fa-envelope ），请参阅图片它如何看起来像。
但我不明白如何将徽章放在符号顶部 - jsFiddle 。

I would like to add badge with some number (5, 10, 100) on top of the font awesome symbol (fa-envelope), see the picture how it can look like. But I can not understand how to put the badge on top of the symbol - jsFiddle. I would like to have it supported where Twitter Bootstrap 2.3.2 is supported.

推荐答案

这可以在没有额外的mark-

This can be done with no additional mark-up just a new class (which you would use anyway) and a pseudo element.

JSFiddle示范

JSFiddle Demo

HTML

<i class="fa fa-envelope fa-5x fa-border icon-grey badge"></i>

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,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;
}

这篇关于如何添加徽章在字体真棒符号的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！