kero/snippets/examples/dt/datatable/badge/widget.html

<div class="u-container-fluid u-widget-bg">
    <div class="u-row">
        
        <div class="u-col-md-12">
            <div class="u-widget  u-widget-right">
                <div class="u-widget-heading">
                    <h3 class="u-widget-title">徽章</h3>
                </div>
                <div class="u-widget-body">
                <!--徽章代码 -->
                    <div class="demo">
                        <div class="u-badge w-20 m" data-badge="1">
                            <i class="fa fa-bell"></i>
                        </div>
                        
                        <div class="u-badge u-badge-no-background w-20 m" data-badge="1">
                            <i class="fa fa-bell"></i>
                        </div>
                        
                        <br>

                        <div class="u-avatar w-40 m u-avatar-online">
                            <img src="../../../static/2.jpg" alt="..." class="img-circle">
                            <i></i>
                        </div>
                        
                        <div class="u-avatar w-40 m u-avatar-off">
                            <img src="../../../static/2.jpg" alt="..." class="img-circle">
                            <i></i>
                        </div>
                        
                        <div class="u-avatar w-40 m u-avatar-busy">
                            <img src="../../../static/2.jpg" alt="..." class="img-circle">
                            <i></i>
                        </div>
                        
                        <div class="u-avatar w-40 m u-avatar-away">
                            <img src="../../../static/2.jpg" alt="..." class="img-circle">
                            <i></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>