hugo-theme-fuji icon indicating copy to clipboard operation
hugo-theme-fuji copied to clipboard

Add support for Font Awesome

Open zincnode opened this issue 3 years ago • 7 comments

Font Awesome

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

Add global support for Font Awesome

Adding script to head.html makes Font Awesome globally available.

Usage

Example:

<i class="fas fa-camera"></i>

Add short code support for Font Awesome

Create fa.html to add support for Font Awesome shortcodes in markdown.

via: Font Awesome in Hugo

Usage

Example:

{{< fa bath >}}

zincnode avatar Mar 04 '21 08:03 zincnode

Global support for Font Awesome is not recommended as the script is large and not everyone needs to use it.

Shortcode is the solution, and I recommend the jsDelivr CDN for its better performance in China:

https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css

dsrkafuu avatar Mar 05 '21 08:03 dsrkafuu

Thanks @dsrkafuu for the comments on not using the Font Awesome. If I need to use a suitable icon for an Author, how do I add? what icons can I make use of it and how can we get them imported in the Hugo Theme Template?

itsraghz avatar Jun 16 '21 10:06 itsraghz

Hi @dsrkafuu , The post https://matze.rocks/posts/fontawesome_in_hugo/ shared by @zincnode seems to be easy to follow on our own sites. How do you see that? Is it a valid extension/customization?

itsraghz avatar Jun 16 '21 10:06 itsraghz

@itsraghz

Previously I've been working on a solution to load icons from the local assets folder, it uses shortcodes or partials (in templates) then inserts the SVG icon into the HTML dom which saves time for requesting remote files.

Like this on my blog theme:

  • Template: https://github.com/dsrkafuu/dsr-blog/blob/main/layouts/partials/icon.html
  • Files: https://github.com/dsrkafuu/dsr-blog/tree/main/assets/svg

However, since this method requires adding SVG files manually, it’s a bit more troublesome for theme users, so I haven't decided exactly how to implement it.

dsrkafuu avatar Jun 16 '21 10:06 dsrkafuu

Thanks @dsrkafuu . I have been recently learning Hugo and using your fuji theme only. You can see my posts in https://discourse.gohugo.in website- - https://discourse.gohugo.io/u/itsraghz/summary. I will see if I can take up something - may be once I get a good grasping on Go Language and Hugo Internals.

Btw, You can visit my blog deployed on Netlify and available at https://raghsonline.com if time permits. I have been adding all my experiments in the "Hugo" tag → https://raghsonline.com/tags/hugo/

itsraghz avatar Jun 16 '21 11:06 itsraghz

Thanks for using the Fuji theme.

The theme itself was created when I started using Hugo quite early on.

So there may be a lot of imperfections yet to be modified.

dsrkafuu avatar Jun 16 '21 11:06 dsrkafuu

Thanks for using the Fuji theme.

The theme itself was created when I started using Hugo quite early on.

So there may be a lot of imperfections yet to be modified.

yes indeed. I will see if there is anything I can help contribute for the betterment. I just created an issue https://github.com/dsrkafuu/hugo-theme-fuji/issues/80. Kindly check and advise.

itsraghz avatar Jun 16 '21 12:06 itsraghz