Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Foundation Font Awesome Buttons

Foundation Version Supported Version Font Awesome Supported Version

Foundation Icon Buttons combines the Zurb's Foundation with the Font Awesome project. Building stylish icon buttons is quick and easy.

Button Preview

How to Use

It's simple! Just add ffab and a Font Awesome class to a button

<a href="#" class="button ffab fa-arrow-right">Text</a>

View Docs & Examples


1. Install the Bower component

Run the following command in the root folder of your project:

$ bower install foundation-font-awesome-buttons --save-dev

2. Include in Sass

Import all the project dependencies in your main Sass file:

@charset 'utf-8';

@import 'settings';

@import 'foundation';
@import 'font-awesome';
@import 'ffab';

@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-button-group;

@include ffab-everything;

Make sure your Sass compiler knows where to find all the dependencies.

Here is an example of a GulpFile.js setup using the Gulp-Sass includePaths option:

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [

gulp.task('sass', function () {
  return gulp.src('scss/*.scss')
      includePaths: sassPaths,
    .on('error', $.sass.logError))
      browsers: ['last 2 versions', 'ie >= 9'],

gulp.task('default', ['sass'], function () {['scss/*.scss'], ['sass']);


There are a set of Sass variables that can help make these buttons your own. I recommend adding the following variables to your project's _settings.scss file (to follow the Foundation workflow).

// 37. Foundation Font Awesome Buttons
// - - - - - - - - - - - - - - - -
// $ffab-css-prefix: 'ffab';
// $ffab-default-position: 'after';
// $ffab-border-width: 0;
// $ffab-angle: 15;
// $ffab-transition-speed: 0.3s;
// $ffab-transition-behavior: 'remove'; // @options 'remove', 'cover' or 'none'
// $ffab-overlay-background-color: rgba(255, 255, 255, .1);
// $ffab-has-active-state: true !default;
// $ffab-active-transition-speed: 200ms !default;
// $ffab-active-value: 3px !default;


  • Update documentation with new class names and more examples
  • Add SassDocs to the entire project
  • Create a CDN CSS to easily add ffab to any project (without Sass!)
  • Create a rounded version
  • Remove background color from hollow buttons
You can’t perform that action at this time.