Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

Setup

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 = [
  'node_modules/foundation-sites/scss',
  'node_modules/@fortawesome/fontawesome-free/scss',
  'node_modules/foundation-font-awesome-buttons/src',
];

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

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

Settings

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;

TODO

  • 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.