html - 如何使用 `comment` fa-icon 和文本 div 来显示用户拥有的消息数？

Question

我想创建一个类似于 link 的消息计数器，仅使用 CSS 和 HTML。

让我们假设我有办法使用 AngularJS 注入(inject)消息数量，并且我使用以下代码:<i class="fa fa-comment-o"></i>显示消息图标。我怎样才能用跨度覆盖它并将跨度元素精确地放在 Angular 落里？

Answer 1

您可以使用类似下面的内容。它是一个跨度(相对定位)，包含图标和另一个绝对定位的跨度。

<span class="count-icon">
    <i class="fa fa-2x fa-comment"></i>
    <span class="count">3</span>
</span>

还有 CSS:

.count-icon {
    display: inline-block;
    position: relative;
}

.count {
    position: absolute;
    top: 0;
    right: 0;

    height: 16px;
    width: 16px;

    background: red;
    border-radius: 8px;

    font-size: 12px;    
    text-align: center;
}

参见 fiddle :http://jsfiddle.net/mX45f/