karma

/webapp

Version 1.0.0

Buttons & Icons

  followers 2997
Dialog
Settings

Bootstrap buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Bootstrap buttons

Use bootstraps default buttons with colors.

Usage: .btn
Button size

fancy larger or smaller buttons?

Usage: .btn-lg, .btn-sm or .btn-xs.
Block level

Need a full width button, use the block level class.

Usage: .btn-block
Text Icon   Text   Icon
Grouped buttons

You can group buttons together

Usage: .btn-group
Button Button Button Button
Grouped vertical

Make a set of buttons appear vertically stacked rather than horizontally.

Usage: .btn-group + .btn-group-vertical
Top

Square buttons

Custom made square buttons which can contain labels and indicators.

Dashboard

Bookmark

Documents

6

Logout

Comments

Settings

Refresh

Calendar

Media
Icon and text

Easy to use big squared buttons with text and icons. These buttons can hold an indicator or a corner label(with icon).

Dashboard

Bookmark

Documents

6

Logout

Comments

Calendar
Grouped

Group square buttons.

6
Icon only

Easy to use small squared buttons with only an icon. These buttons can hold an indicator or a corner label.

6
Grouped

Group square buttons.

Top

Round buttons

Custom made round buttons which can contain a indicator.

Home

Bookmark

Documents

Logout

Comments

6

Settings

Refresh

Calendar

Media
Text & icon

Easy to use big round buttons with text and icons. These buttons can hold a indicator.

6
Icon only

Easy to use big round buttons with an icon. These buttons can hold a indicator.

Button round

This class will transform the bootstrap button into an round button.

Usage: .btn-circle
Top

Brand colors

Build your own brand buttons. The brands are limited at this moment as they are combined with the icon pack.

  Like this page Like this page
Facebook

Build your own facebook button.

Usage: .brand-facebook
  Follow me Follow me Retweet
Twitter

Build your own twitter button.

Usage: .brand-twitter
  Sign in with linkedin Sign in with linkedin
Linkedin

Build your own linkedin button.

Usage: .brand-linkedin
  Sign in with google + Sign in with google +
Google +

Build your own google + button.

Usage: .brand-googleplus
  Follow me on pinterest Follow me on pinterest
Pinterest

Build your own pinterest button.

Usage: .brand-pinterest
Top

Misc buttons

Other usefull buttons and other stuff.

Subscribers 24
Comments 5
2997   followers
Misc

Show indicators and numbers.

Top

font Awesome

The iconic font designed for use with Twitter Bootstrap. These icons can be used in many ways.

fa-glass (&#xf000;)
fa-music (&#xf001;)
fa-search (&#xf002;)
fa-envelope-o (&#xf003;)
fa-heart (&#xf004;)
fa-star (&#xf005;)
fa-star-o (&#xf006;)
fa-user (&#xf007;)
fa-film (&#xf008;)
fa-th-large (&#xf009;)
fa-th (&#xf00a;)
fa-th-list (&#xf00b;)
fa-check (&#xf00c;)
fa-times (&#xf00d;)
fa-search-plus (&#xf00e;)
fa-search-minus (&#xf010;)
fa-power-off (&#xf011;)
fa-signal (&#xf012;)
fa-cog (&#xf013;)
fa-trash-o (&#xf014;)
fa-home (&#xf015;)
fa-file-o (&#xf016;)
fa-clock-o (&#xf017;)
fa-road (&#xf018;)
fa-download (&#xf019;)
fa-arrow-circle-o-down (&#xf01a;)
fa-arrow-circle-o-up (&#xf01b;)
fa-inbox (&#xf01c;)
fa-play-circle-o (&#xf01d;)
fa-repeat (&#xf01e;)
fa-refresh (&#xf021;)
fa-list-alt (&#xf022;)
fa-lock (&#xf023;)
fa-flag (&#xf024;)
fa-headphones (&#xf025;)
fa-volume-off (&#xf026;)
fa-volume-down (&#xf027;)
fa-volume-up (&#xf028;)
fa-qrcode (&#xf029;)
fa-barcode (&#xf02a;)
fa-tag (&#xf02b;)
fa-tags (&#xf02c;)
fa-book (&#xf02d;)
fa-bookmark (&#xf02e;)
fa-print (&#xf02f;)
fa-camera (&#xf030;)
fa-font (&#xf031;)
fa-bold (&#xf032;)
fa-italic (&#xf033;)
fa-text-height (&#xf034;)
fa-text-width (&#xf035;)
fa-align-left (&#xf036;)
fa-align-center (&#xf037;)
fa-align-right (&#xf038;)
fa-align-justify (&#xf039;)
fa-list (&#xf03a;)
fa-outdent (&#xf03b;)
fa-indent (&#xf03c;)
fa-video-camera (&#xf03d;)
fa-picture-o (&#xf03e;)
fa-pencil (&#xf040;)
fa-map-marker (&#xf041;)
fa-adjust (&#xf042;)
fa-tint (&#xf043;)
fa-pencil-square-o (&#xf044;)
fa-share-square-o (&#xf045;)
fa-check-square-o (&#xf046;)
fa-move (&#xf047;)
fa-step-backward (&#xf048;)
fa-fast-backward (&#xf049;)
fa-backward (&#xf04a;)
fa-play (&#xf04b;)
fa-pause (&#xf04c;)
fa-stop (&#xf04d;)
fa-forward (&#xf04e;)
fa-fast-forward (&#xf050;)
fa-step-forward (&#xf051;)
fa-eject (&#xf052;)
fa-chevron-left (&#xf053;)
fa-chevron-right (&#xf054;)
fa-plus-circle (&#xf055;)
fa-minus-circle (&#xf056;)
fa-times-circle (&#xf057;)
fa-check-circle (&#xf058;)
fa-question-circle (&#xf059;)
fa-info-circle (&#xf05a;)
fa-crosshairs (&#xf05b;)
fa-times-circle-o (&#xf05c;)
fa-check-circle-o (&#xf05d;)
fa-ban (&#xf05e;)
fa-arrow-left (&#xf060;)
fa-arrow-right (&#xf061;)
fa-arrow-up (&#xf062;)
fa-arrow-down (&#xf063;)
fa-share (&#xf064;)
fa-resize-full (&#xf065;)
fa-resize-small (&#xf066;)
fa-plus (&#xf067;)
fa-minus (&#xf068;)
fa-asterisk (&#xf069;)
fa-exclamation-circle (&#xf06a;)
fa-gift (&#xf06b;)
fa-leaf (&#xf06c;)
fa-fire (&#xf06d;)
fa-eye (&#xf06e;)
fa-eye-slash (&#xf070;)
fa-exclamation-triangle (&#xf071;)
fa-plane (&#xf072;)
fa-calendar (&#xf073;)
fa-random (&#xf074;)
fa-comment (&#xf075;)
fa-magnet (&#xf076;)
fa-chevron-up (&#xf077;)
fa-chevron-down (&#xf078;)
fa-retweet (&#xf079;)
fa-shopping-cart (&#xf07a;)
fa-folder (&#xf07b;)
fa-folder-open (&#xf07c;)
fa-resize-vertical (&#xf07d;)
fa-resize-horizontal (&#xf07e;)
fa-bar-chart-o (&#xf080;)
fa-twitter-square (&#xf081;)
fa-facebook-square (&#xf082;)
fa-camera-retro (&#xf083;)
fa-key (&#xf084;)
fa-cogs (&#xf085;)
fa-comments (&#xf086;)
fa-thumbs-o-up (&#xf087;)
fa-thumbs-o-down (&#xf088;)
fa-star-half (&#xf089;)
fa-heart-o (&#xf08a;)
fa-sign-out (&#xf08b;)
fa-linkedin-square (&#xf08c;)
fa-thumb-tack (&#xf08d;)
fa-external-link (&#xf08e;)
fa-sign-in (&#xf090;)
fa-trophy (&#xf091;)
fa-github-square (&#xf092;)
fa-upload (&#xf093;)
fa-lemon-o (&#xf094;)
fa-phone (&#xf095;)
fa-square-o (&#xf096;)
fa-bookmark-o (&#xf097;)
fa-phone-square (&#xf098;)
fa-twitter (&#xf099;)
fa-facebook (&#xf09a;)
fa-github (&#xf09b;)
fa-unlock (&#xf09c;)
fa-credit-card (&#xf09d;)
fa-rss (&#xf09e;)
fa-hdd (&#xf0a0;)
fa-bullhorn (&#xf0a1;)
fa-bell (&#xf0f3;)
fa-certificate (&#xf0a3;)
fa-hand-o-right (&#xf0a4;)
fa-hand-o-left (&#xf0a5;)
fa-hand-o-up (&#xf0a6;)
fa-hand-o-down (&#xf0a7;)
fa-arrow-circle-left (&#xf0a8;)
fa-arrow-circle-right (&#xf0a9;)
fa-arrow-circle-up (&#xf0aa;)
fa-arrow-circle-down (&#xf0ab;)
fa-globe (&#xf0ac;)
fa-wrench (&#xf0ad;)
fa-tasks (&#xf0ae;)
fa-filter (&#xf0b0;)
fa-briefcase (&#xf0b1;)
fa-fullscreen (&#xf0b2;)
fa-group (&#xf0c0;)
fa-link (&#xf0c1;)
fa-cloud (&#xf0c2;)
fa-flask (&#xf0c3;)
fa-scissors (&#xf0c4;)
fa-files-o (&#xf0c5;)
fa-paperclip (&#xf0c6;)
fa-floppy-o (&#xf0c7;)
fa-square (&#xf0c8;)
fa-reorder (&#xf0c9;)
fa-list-ul (&#xf0ca;)
fa-list-ol (&#xf0cb;)
fa-strikethrough (&#xf0cc;)
fa-underline (&#xf0cd;)
fa-table (&#xf0ce;)
fa-magic (&#xf0d0;)
fa-truck (&#xf0d1;)
fa-pinterest (&#xf0d2;)
fa-pinterest-square (&#xf0d3;)
fa-google-plus-square (&#xf0d4;)
fa-google-plus (&#xf0d5;)
fa-money (&#xf0d6;)
fa-caret-down (&#xf0d7;)
fa-caret-up (&#xf0d8;)
fa-caret-left (&#xf0d9;)
fa-caret-right (&#xf0da;)
fa-columns (&#xf0db;)
fa-sort (&#xf0dc;)
fa-sort-asc (&#xf0dd;)
fa-sort-desc (&#xf0de;)
fa-envelope (&#xf0e0;)
fa-linkedin (&#xf0e1;)
fa-undo (&#xf0e2;)
fa-gavel (&#xf0e3;)
fa-tachometer (&#xf0e4;)
fa-comment-o (&#xf0e5;)
fa-comments-o (&#xf0e6;)
fa-bolt (&#xf0e7;)
fa-sitemap (&#xf0e8;)
fa-umbrella (&#xf0e9;)
fa-clipboard (&#xf0ea;)
fa-lightbulb-o (&#xf0eb;)
fa-exchange (&#xf0ec;)
fa-cloud-download (&#xf0ed;)
fa-cloud-upload (&#xf0ee;)
fa-user-md (&#xf0f0;)
fa-stethoscope (&#xf0f1;)
fa-suitcase (&#xf0f2;)
fa-bell-o (&#xf0a2;)
fa-coffee (&#xf0f4;)
fa-cutlery (&#xf0f5;)
fa-file-text-o (&#xf0f6;)
fa-building (&#xf0f7;)
fa-hospital (&#xf0f8;)
fa-ambulance (&#xf0f9;)
fa-medkit (&#xf0fa;)
fa-fighter-jet (&#xf0fb;)
fa-beer (&#xf0fc;)
fa-h-square (&#xf0fd;)
fa-plus-square (&#xf0fe;)
fa-angle-double-left (&#xf100;)
fa-angle-double-right (&#xf101;)
fa-angle-double-up (&#xf102;)
fa-angle-double-down (&#xf103;)
fa-angle-left (&#xf104;)
fa-angle-right (&#xf105;)
fa-angle-up (&#xf106;)
fa-angle-down (&#xf107;)
fa-desktop (&#xf108;)
fa-laptop (&#xf109;)
fa-tablet (&#xf10a;)
fa-mobile (&#xf10b;)
fa-circle-o (&#xf10c;)
fa-quote-left (&#xf10d;)
fa-quote-right (&#xf10e;)
fa-spinner (&#xf110;)
fa-circle (&#xf111;)
fa-reply (&#xf112;)
fa-github-alt (&#xf113;)
fa-folder-o (&#xf114;)
fa-folder-open-o (&#xf115;)
fa-expand-o (&#xf116;)
fa-collapse-o (&#xf117;)
fa-smile-o (&#xf118;)
fa-frown-o (&#xf119;)
fa-meh-o (&#xf11a;)
fa-gamepad (&#xf11b;)
fa-keyboard-o (&#xf11c;)
fa-flag-o (&#xf11d;)
fa-flag-checkered (&#xf11e;)
fa-terminal (&#xf120;)
fa-code (&#xf121;)
fa-reply-all (&#xf122;)
fa-mail-reply-all (&#xf122;)
fa-star-half-o (&#xf123;)
fa-location-arrow (&#xf124;)
fa-crop (&#xf125;)
fa-code-fork (&#xf126;)
fa-chain-broken (&#xf127;)
fa-question (&#xf128;)
fa-info (&#xf129;)
fa-exclamation (&#xf12a;)
fa-superscript (&#xf12b;)
fa-subscript (&#xf12c;)
fa-eraser (&#xf12d;)
fa-puzzle-piece (&#xf12e;)
fa-microphone (&#xf130;)
fa-microphone-slash (&#xf131;)
fa-shield (&#xf132;)
fa-calendar-o (&#xf133;)
fa-fire-extinguisher (&#xf134;)
fa-rocket (&#xf135;)
fa-maxcdn (&#xf136;)
fa-chevron-circle-left (&#xf137;)
fa-chevron-circle-right (&#xf138;)
fa-chevron-circle-up (&#xf139;)
fa-chevron-circle-down (&#xf13a;)
fa-html5 (&#xf13b;)
fa-css3 (&#xf13c;)
fa-anchor (&#xf13d;)
fa-unlock-o (&#xf13e;)
fa-bullseye (&#xf140;)
fa-ellipsis-horizontal (&#xf141;)
fa-ellipsis-vertical (&#xf142;)
fa-rss-square (&#xf143;)
fa-play-circle (&#xf144;)
fa-ticket (&#xf145;)
fa-minus-square (&#xf146;)
fa-minus-square-o (&#xf147;)
fa-level-up (&#xf148;)
fa-level-down (&#xf149;)
fa-check-square (&#xf14a;)
fa-pencil-square (&#xf14b;)
fa-external-link-square (&#xf14c;)
fa-share-square (&#xf14d;)
fa-compass (&#xf14e;)
fa-caret-square-o-down (&#xf150;)
fa-caret-square-o-up (&#xf151;)
fa-caret-square-o-right (&#xf152;)
fa-eur (&#xf153;)
fa-gbp (&#xf154;)
fa-usd (&#xf155;)
fa-inr (&#xf156;)
fa-jpy (&#xf157;)
fa-rub (&#xf158;)
fa-krw (&#xf159;)
fa-btc (&#xf15a;)
fa-file (&#xf15b;)
fa-file-text (&#xf15c;)
fa-sort-alpha-asc (&#xf15d;)
fa-sort-alpha-desc (&#xf15e;)
fa-sort-amount-asc (&#xf160;)
fa-sort-amount-desc (&#xf161;)
fa-sort-numeric-asc (&#xf162;)
fa-sort-numeric-desc (&#xf163;)
fa-thumbs-up (&#xf164;)
fa-thumbs-down (&#xf165;)
fa-youtube-square (&#xf166;)
fa-youtube (&#xf167;)
fa-xing (&#xf168;)
fa-xing-square (&#xf169;)
fa-youtube-play (&#xf16a;)
fa-dropbox (&#xf16b;)
fa-stack-overflow (&#xf16c;)
fa-instagram (&#xf16d;)
fa-flickr (&#xf16e;)
fa-adn (&#xf170;)
fa-bitbucket (&#xf171;)
fa-bitbucket-square (&#xf172;)
fa-tumblr (&#xf173;)
fa-tumblr-square (&#xf174;)
fa-long-arrow-down (&#xf175;)
fa-long-arrow-up (&#xf176;)
fa-long-arrow-left (&#xf177;)
fa-long-arrow-right (&#xf178;)
fa-apple (&#xf179;)
fa-windows (&#xf17a;)
fa-android (&#xf17b;)
fa-linux (&#xf17c;)
fa-dribbble (&#xf17d;)
fa-skype (&#xf17e;)
fa-foursquare (&#xf180;)
fa-trello (&#xf181;)
fa-female (&#xf182;)
fa-male (&#xf183;)
fa-gittip (&#xf184;)
fa-sun-o (&#xf185;)
fa-moon-o (&#xf186;)
fa-archive (&#xf187;)
fa-bug (&#xf188;)
fa-vk (&#xf189;)
fa-weibo (&#xf18a;)
fa-renren (&#xf18b;)
fa-pagelines (&#xf18c;)
fa-stack-exchange (&#xf18d;)
fa-arrow-circle-o-right (&#xf18e;)
fa-arrow-circle-o-left (&#xf190;)
fa-caret-square-o-left (&#xf191;)
fa-dot-circle-o (&#xf192;)
fa-wheelchair (&#xf193;)
fa-vimeo-square (&#xf194;)
fa-try (&#xf195;)
Top

Social icons

Colored social icons which comes in 3 different sizes (16, 24 and 32px) included the source files.

Top

Flag icons

Colored flag icons which comes in 5 different sizes (16, 24, 32, 48 and 64px) and in 2 types(flat and shiny).