1.3 KiB
+++ title = "Icons and logos" weight = 27 +++
The Relearn theme for Hugo loads the Font Awesome library, allowing you to easily display any icon or logo available in the Font Awesome free collection.
Finding an icon
Browse through the available icons in the Font Awesome Gallery. Notice that the free filter is enabled, as only the free icons are available by default.
Once on the Font Awesome page for a specific icon, for example the page for the heart, copy the HTML reference and paste into the Markdown content.
The HTML to include the heart icon is:
<i class="fas fa-heart"></i>
Including in markdown
Paste the <i> HTML into markup and Font Awesome will load the relevant icon.
Built with <i class="fas fa-heart"></i> by Relearn and Hugo
Which appears as
Built with by Relearn and Hugo
Customising icons
Font Awesome provides many ways to modify the icon
- Change colour (by default the icon will inherit the parent colour)
- Increase or decrease size
- Rotate
- Combine with other icons
Check the full documentation on web fonts with CSS for more.