DIV CSS 佈局教程網

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 顏色設置為白色

最終效果如圖所示：