font Awesome 是非常有名的一个前端icon库。也是项目中用的最多的icon库。
其中就有不少Brand Icon 像微信、微博。但是没有在Brand Icon里面找到博客园的Icon。
倒是在Web Application Icons 里找到了 fa-rss-square 和 fa-rss
和博客园的Icon 稍微有点不同
那么如何制作一个带圆环的Icon呢。
<a href="#" title="cnblogs.com"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-rss fa-stack-1x fa-inverse"></i> </span> </a>
Step 1. 为了处理多个Icon， 将 fa-stack 运用到父元素， fa-lg 是控制整个 Icon 大小。
Step 2. 设置 fa-circle 作为背景Icon，fa-stack-2x 为更大的Icon 准备，text-primary 控制背景颜色
Step 3. fa-stack-1 设置常规Icon 大小. 最后需要用fa-inverse 将Icon 颜色设置为白色
最终效果如图所示：
