Setting Things Up
For this example we're going to use a static site generator called Metalsmith(opens new window) . Clone the project and use the static-site example. Also, remember to install dependencies right after that.
Create a helper
Create a file in the
static-site directory called
index.js and require the new helper file.
Edit Layout and Reference an Icon
layouts/layout.html and add this to the
<head>. After that change the header.
Build the static content
build/index.html to see the rendered icon.
Server side rendering introduces an interesting problem when we consider the CSS that is needed to render an icon effectively.
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.
This Handlebars helper is calling
dom.css() which returns a
Use it similar to this: