Skip to content

Instantly share code, notes, and snippets.

@mariselli
Created March 10, 2016 09:52
Show Gist options
  • Save mariselli/c27d0fed964bc098007e to your computer and use it in GitHub Desktop.
Save mariselli/c27d0fed964bc098007e to your computer and use it in GitHub Desktop.
Generate font with icons with Gulp
@font-face {
font-family: "<%= fontName %>";
src: url('<%= fontPath %><%= fontName %>.eot');
src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
url('<%= fontPath %><%= fontName %>.woff') format('woff'),
url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
font-weight: normal;
font-style: normal;
}
.<%= className %>:before {
display: inline-block;
font-family: "<%= fontName %>";
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.<%= className %>-lg {
font-size: 1.3333333333333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.<%= className %>-2x { font-size: 2em; }
.<%= className %>-3x { font-size: 3em; }
.<%= className %>-4x { font-size: 4em; }
.<%= className %>-5x { font-size: 5em; }
.<%= className %>-fw {
width: 1.2857142857142858em;
text-align: center;
}
<% _.each(glyphs, function(glyph) { %>.<%= className %>-<%= glyph.name %>:before { content: "\<%= glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() %>" }
<% }); %>
var gulp = require('gulp');
var consolidate = require('gulp-consolidate');
var iconfont = require('gulp-iconfont');
var rename = require("gulp-rename");
var async = require('async');
var runTimestamp = Math.round(Date.now()/1000);
gulp.task('iconfont', function(done){
var iconStream = gulp.src(['icons/*.svg'])
.pipe(iconfont({
fontName: 'myfont', // required
// prependUnicode: true, // recommended option
normalize:true, // recommended option
fontHeight: 1001, // recommended option
timestamp: runTimestamp, // recommended to get consistent builds when watching files
formats: ['ttf', 'eot', 'woff','svg']
}));
async.parallel([
function handleGlyphs (cb) {
iconStream.on('glyphs', function(glyphs, options) {
gulp.src('font-template.scss')
.pipe(consolidate('lodash', {
glyphs: glyphs,
fontName: 'myfont', // name that font will get, used as file name and font face name
fontPath: '../fonts/', // string used in font-template.scss to generate the right path
className: 'ico' // prefix for font used in font-template.scss
}))
.pipe(rename('icons-compiled.scss')) // rename file in a convinient way
.pipe(gulp.dest('css/')) // move file in a specific folder
.on('finish', cb);
});
},
function handleFonts (cb) {
iconStream
.pipe(gulp.dest('fonts/')) // folder where store the font files (ttf, eot, woff, svg)
.on('finish', cb);
}
], done);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment