Home  >  Article  >  Backend Development  >  Pure css implementation of icon button framework

Pure css implementation of icon button framework

WBOY
WBOYOriginal
2016-07-25 08:47:591405browse
Icon size for fa-lg (increased by 33%), fa-2x, fa-3x, fa-4x, or fa-5x class.

fa-stack-1x fixed size icons, fa-stack-2x

Use arbitrary rotation and flipping icons fa-rotate-* and fa-flip-* classes. *How many degrees does it represent: fa-rotate-90

Use the fa-spin rotation class to get any icon. Can handle fa-spinner, fa-refresh, fa-cog well.

fa-border border

Demo address demo:
http://www.0917cc.com/blog/b926.htm
  1. @font-face {
  2. font-family: 'FontAwesome';
  3. src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  4. 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');
  5. font-weight: normal;
  6. font-style: normal;
  7. }
Copy code
  1. WeChat icon
  2. < a href='#' class="svn_btn3 p5">WeChat icon
  3. WeChat icon
Copy code
Pure css implementation of icon button framework


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn