With the introduction of SVG's to Font Awesome we can now render icons on the server if you are generating or serving your pages with JavaScript. By rendering server side you save the browser the effort required to download additional files or perform the rendering calculations. For this example we're going to use a static site generator called Metalsmith(opens new window).
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 7,864 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
npminstall\npm i --save @fortawesome/fontawesome-svg-core \npm i --save @fortawesome/free-solid-svg-icons
Create a Helper
Create a file in the static-site directory called helpers.js.
var Handlebars =require('handlebars');var library =require('@fortawesome/fontawesome-svg-core').library;var dom =require('@fortawesome/fontawesome-svg-core').dom;var icon =require('@fortawesome/fontawesome-svg-core').icon;var fas =require('@fortawesome/free-solid-svg-icons').fas;// Adds all the icons from the Solid style into our library for easy lookup
library.add(fas)
Handlebars.registerHelper('fontawesome-css',function(){returnnewHandlebars.SafeString(
dom.css())})
Handlebars.registerHelper('fontawesome-icon',function(args){returnnewHandlebars.SafeString(icon({prefix:'fas',iconName: args.hash.icon }).html
)})
Add this to the Metalsmith File
Edit index.js and require the new helper file.
var Metalsmith =require('metalsmith');var markdown =require('metalsmith-markdown');var layouts =require('metalsmith-layouts');var permalinks =require('metalsmith-permalinks');require('./helpers')
…
Edit Layout & Reference Icon
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 7,864 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
The classes svg-inline--fa, fa-w-16, and fa-lg all have a critical role in controlling the size of the icon and the placement in the DOM. If the CSS is missing when this icon displays in the browser it will flash from a very large icon down to a properly sized one a moment later. Here's how to solve it...
As we saw in the example we can inline the CSS directly into the page.
<style>{{fontawesome-css}}</style>
This Handlebars helper is calling dom.css() which returns a String representing all the styles required for displaying icons at the correct size. You can link to the external CSS, which is specific to using SVG with JavaScript. It can be found in the svg-with-js/css/fa-svg-with-js.css folder.