vue-fontawesome 字体分层 && 计数器

场景

. 网站通知类消息肯定是需要计数器的

参考文章

FortAwesome/vue-fontawesome https://github.com/FortAwesome/vue-fontawesome
样例 https://fontawesome.com/how-to-use/on-the-web/styling/layering 几种常用的类型
同源图标 http://www.bootcss.com/p/font-awesome/#

解决

• 用法
  
  • div.fa-2x 控制图标的大小
  • span.fa-layers 用来包裹图标和文字（这里是声明了一个小整体）
  • span.fa-fw 样式对齐
  • span.fa-layers-counter 加一个样式到图标的右上角,这个位置是可以调节的
    
    • fa-layers-bottom-left,
    • fa-layers-bottom-right
    • fa-layers-top-left
    • the default fa-layers-top-right

    <div class="fa-2x">
        <span class="fa-layers fa-fw">
            <i class="icon-bell-alt"></i>
            <span class="fa-layers-counter" style="background:Tomato" v-show="count">{{ count }}</span>
        </span>
    </div>