纯css实现图标按钮框架

时间:2014-07-22 14:48来源: 作者: 点击: 次

分享到：

fa-lg图标大小(增加33%), fa-2x, fa-3x, fa-4x,或 fa-5x类。 fa-stack-1x固定大小的图标, fa-stack-2x 使用任意旋转和翻转图标 fa-rotate-*和 fa-flip-*类。 *代表多少度:fa-rotate-90 使用 fa-spin旋转类得到任何图

fa-lg图标大小(增加33%), fa-2x, fa-3x, fa-4x,或 fa-5x类。

fa-stack-1x固定大小的图标, fa-stack-2x

使用任意旋转和翻转图标 fa-rotate-*和 fa-flip-*类。 *代表多少度:fa-rotate-90

使用 fa-spin旋转类得到任何图标。能够很好地处理 fa-spinner, fa-refresh, fa-cog.

fa-border 边框

演示地址demo:
http://www.0917cc.com/blog/b926.htm

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

2. [代码][PHP]代码跳至 [1] [2] [全屏预览]

<a href='#' class="svn_btn3 " ><i class="fa fa-weixin fa-1x"></i>微信图标</a>
<a href='#' class="svn_btn3 p5"><i class="fa fa-weixin fa-1x"></i>微信图标</a>
<a href='#' class="svn_btn3 p10"><i class="fa fa-weixin fa-2x"></i>微信图标</a>