github.com/hugo-mods/icons
Initialize Hugo's mod system on your site:
hugo mod init github.com/<username>/<your-repo>
Add module to site's config (e.g. config.yaml):
module:
imports:
- path: github.com/hugo-mods/icons
Get the module (also upgrades existing one):
hugo mod get -u
This might take some time, as it will fetch all potentially usable icons.
| Icon Family | Identifier Prefix |
|---|---|
| Font Awesome Solid | fas |
| Font Awesome Regular | far |
| Font Awesome Brands | fab |
Please also have a look at the recommended CSS for styling.
hugo-mod-icons can be used in various ways that depend on your preferences and context.
To master this mod, it is advisable to read through every pattern and then decide which one works best for you.
This pattern is especially useful for smaller sites/prototypes where you can easily pass around the page's context.
Reference icons with:
<body>
<!-- [...] -->
<h1>I {{ partial "icon" (dict "context" . "name" "fas heart") }} hugo-mod-icons!</h1>
<!-- [...] -->
</body>
Finally, place the actual data (non-visible) at the very end of the body:
<body>
<!-- [...] -->
{{ partial "icon-data" . }}
</body>
It's important that the context is the same as the one passed to the first partial "icon",
which is sometimes a bit tricky, hence the next pattern has been invented.
:bulb: The module will automatically keep track of all your referenced icons and only add the ones that are actually needed ONCE. No matter how many times you reference one and the same icon.
This pattern is more advanced and especially suitable for larger sites or themes. It requires maintaining all the icons you want to use in a separate icons.yaml file in the data folder, e.g.:
fas heart:
You can omit the part after : if you just want to add the icon without renaming it,
but if you'd like to use heart instead of fas heart, you can do the following:
heart: fas heart
The bonus you get is that you can easily exchange fas heart with another :heart:-like icon at a later time!
Next, you reference the icon like:
<body>
<!-- [...] -->
<h1>I {{ partial "icon" "heart" }} icons!</h1>
<!-- [...] -->
</body>
Finally, place the actual data (non-visible) at the very end of the body just as in the first pattern:
<body>
<!-- [...] -->
{{ partial "icon-data" . }}
</body>
:bulb: What makes this pattern awesome is that it scales well and that it does not need context for referencing icons. The only downside is that you need to additionally maintain the data file.
You can also use this mod from within your content files with the icon shortcode:
---
title: "My post"
---
Lorem ipsum and so on...
> tldr: `hugo-mods` rock {{< icon "guitar" >}}
To be continued. Documentation about mixing patterns and icon loaders will follow here.
Please also check out the exampleSite which you can examine and e.g.
launch via hugo serve exampleSite.
FAQs
Unknown package
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.