Foundation Font Awesome Buttons are a set of classes to easily add vector icons to your Zurb Foundation for Site's buttons using the Font Awesome icon set.
Add the foundation .button with the .ffab class and a Font Awesome class (ex: .fa-arrow-right).
<a href="#" class="button ffab fa-arrow-right">Default Button</a>By default, the icon's position is after the text (but can be changed with the $ffab-default-position variable).
To overwrite the default behavior, simply add a .before or .after class to the element.
<!-- Icon Before -->
<a href="#" class="button [ ffab before fa-arrow-left ]">Icon Before</a>
<!-- Icon After -->
<a href="#" class="button [ ffab after fa-arrow-right ]">Icon After</a>
Additional classes can be added to your component to change its size and shape (according to Zurb Foundation's documentation).
<!-- Size Classes -->
<a href="#" class="[ button tiny ][ ffab fa-arrow-right ]">Tiny Button</a>
<a href="#" class="[ button small ][ ffab fa-arrow-right ]">Small Button</a>
<a href="#" class="[ button ][ ffab fa-arrow-right ]">Default Button</a>
<a href="#" class="[ button large ][ ffab fa-arrow-right ]">Large Button</a>
<a href="#" class="[ button expanded ][ ffab fa-expand ]">Expanded Button</a>
Additional classes can be added to your component to change its color and behavior.
<!-- Color Classes -->
<a href="#" class="button [ ffab fa-arrow-right ]">Default Button</a>
<a href="#" class="[ button success ][ ffab fa-check ]">Success Button</a>
<a href="#" class="[ button secondary ][ ffab fa-user ]">Secondary Button</a>
<a href="#" class="[ button alert ][ ffab fa-warning ]">Alert Button</a>
<a href="#" class="[ button info ][ ffab fa-info-circle ]">Info Button</a>
The button's default transition style is "remove" but can be changed with the $ffab-transition-behavior Sass variable. To overwrite the default behaviors, add the .remove .cover or .static (no transition) class to change a specific button's transition behavior.
<!-- Color Classes -->
<a href="#" class="[ button ][ ffab cover fa-arrow-right ]"> Cover Transition</a>
<a href="#" class="[ button ][ ffab remove fa-arrow-right ]"> Remove Transition</a>
<a href="#" class="[ button ][ ffab static fa-arrow-right ]"> Static Transition</a>
The .hollow and .disabled Foundation button style's are also supported. You can also add add a .bordered class to add a border to the overlay on regular buttons.
<!-- Animated Icons -->
<a href="#" class="button [ ffab hollow fa-arrow-right ]">Animated Icon</a>
<a href="#" class="button [ ffab bordered fa-arrow-right ]">Animated Icon</a>
<a href="#" class="button [ ffab disabled fa-arrow-right ]">Animated Icon</a>
Add the .spin class to get any icon to rotate, or use .pulse to have it rotate with 8 steps. Works well with .fa-spinner, .fa-refresh, and .fa-cog.
<!-- Animated Icons -->
<a href="#" class="button [ ffab spin fa-spinner ]">Animated Icon</a>
<a href="#" class="button [ ffab spin fa-circle-o-notch ]">Animated Icon</a>
<a href="#" class="button [ ffab spin fa-refresh ]">Animated Icon</a>
<a href="#" class="button [ ffab spin fa-cog ]">Animated Icon</a>
<a href="#" class="button [ ffab pulse fa-spinner ]">Animated Icon</a>
To arbitrarily rotate and flip icons, use the .rotate-90, .rotate-180 or .rotate-270 classes to rotate the icon, and .flip-horizontal or .flip-vertical classes to flip the icon.
<!-- Rotated & Flipped -->
<a href="#" class="button [ ffab fa-shield ]">Normal Icon</a>
<a href="#" class="button [ ffab fa-shield rotate-90 ]">Rotate Icon 90</a>
<a href="#" class="button [ ffab fa-shield rotate-180 ]">Rotate Icon 180</a>
<a href="#" class="button [ ffab fa-shield rotate-270 ]">Rotate Icon 270</a>
<a href="#" class="button [ ffab fa-shield flip-horizontal ]">Rotate Icon Horizontal</a>
<a href="#" class="button [ ffab fa-shield flip-vertical ]">Rotate Icon Vertical</a>
This project has been integrated with Bower. So all you have to do is run the following command in your project:
$ bower install --save foundation-font-awesome-buttons
To initiate this project, load all required stylesheets in the following order:
@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;
Important: Make sure all the Bower include files are imported using the appropriate paths. Here is a sample GulpFile.js
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/foundation-sites/scss',
'bower_components/fontawesome/scss',
'bower_components/foundation-font-awesome-buttons/rc',
];
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']);
});FFAB buttons can be easily customized by adding the following Sass variables to your _settings.scss file used by Foundation:
// 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);