用font Awesome 制作简单的博客园icon

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 颜色设置为白色

最终效果如图所示：