Font Awesome Hugo Shortcode

Hugo Shortcodes

are simple snippets inside your content files calling built-in or custom templates

You can create custom Shortcodes to avoid adding raw html to your content. Below is a Shortcode to use Font Awesome icons without directly writing html.

Add the following to new file layouts/shortcodes/awesome.html

{{ if .Get 0}}
  <i class="{{ range .Params }}{{ . }} {{ end }}"></i>
{{ else }}
  <span class="shortcode-error">Shortcode usage: &lbrace;&lbrace;&lt; awesome 
  "far fa-smile-wink" &gt;&rbrace;&rbrace;</span>
{{ end }}

That code will add all the Shortcode parameters inside the class attribute of the i html tag. If there are no paramters the Shortcode will print out usage information to remind you how to use it.

Then in your Markdown content you can do something like:

here is a wink {{< awesome far fa-smile-wink >}}

Which generates html:

here is a wink <i class="far fa-smile-wink "></i>

And renders in the browser:

here is a wink 
  

My Hugo-Coder Hugo Theme already has Font Awesome installed, but if yours doesn’t you can use the .HasShortcode function in your page template to see if that page is using the Font Awesome Shortcode and if so to include the Font Awesome Stylesheet in your page header.