你的位置:首页 > ASP.net教程

[ASP.net教程]用font Awesome 制作简单的博客园icon


font Awesome 是非常有名的一个前端icon库。也是项目中用的最多的icon库。

其中就有不少Brand Icon 像微信、微博。但是没有在Brand Icon里面找到博客园的Icon。

倒是在Web Application Icons 里找到了 fa-rss-square 和 fa-rss

image image

和博客园的Icon 稍微有点不同

image

 

那么如何制作一个带圆环的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 颜色设置为白色

 

最终效果如图所示:

image