如何在Font Awesome符號上添加徽章？

Question

我想在Font Awesome符號（fa-envelope）的頂部添加一些編號（5,10,100）的徽章。例如：

但是，我不明白如何把徽章上的符號上方。我的嘗試可以在這裏找到：jsFiddle。

我想支持Twitter Bootstrap 2.3.2。

Answer 1

字體大小這可以不需要額外mark-做改變只是一個新的類（你會使用它）和一個僞元素。

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

Answer 2

包裹fa-envelope和包含在div數量span，使包裝DIV position:relative和spanposition:absolute。

入住這fiddle

HTML使用

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

CSS

.icon-wrapper{ 
    position:relative; 
    float:left; 
} 

*.icon-blue {color: #0088cc} 
*.icon-grey {color: grey} 
i { 
    width:100px; 
    text-align:center; 
    vertical-align:middle; 
} 
.badge{ 
    background: rgba(0,0,0,0.5); 
    width: auto; 
    height: auto; 
    margin: 0; 
    border-radius: 50%; 
    position:absolute; 
    top:-13px; 
    right:-8px; 
    padding:5px; 
} 

希望這可以幫助你

Answer 3

http://jsfiddle.net/zxVhL/16/

通過將徽章放置在圖標元素中，我可以將其定位在相對於圖標容器的邊界。我沒有使用em一切都上漿使徽章的大小是相對於圖標的大小，這可以通過簡單地改變.badge

Answer 4

雖然@ Paulie_D的回答是不錯的，它沒有當你有一個可變的工作這麼好寬容器。

這種解決方案對於好多了：http://codepen.io/johnstuif/pen/pvLgYp

HTML：

<span class="fa-stack fa-5x has-badge" data-count="8,888,888"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <i class="fa fa-bell fa-stack-1x fa-inverse"></i> 
</span> 

CSS：

.fa-stack[data-count]:after{ 
    position:absolute; 
    right:0%; 
    top:1%; 
    content: attr(data-count); 
    font-size:30%; 
    padding:.6em; 
    border-radius:999px; 
    line-height:.75em; 
    color: white; 
    background:rgba(255,0,0,.85); 
    text-align:center; 
    min-width:2em; 
    font-weight:bold; 
}