nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-18 19:00:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Basic usage instructions for Font Awesome library

Browse source
This commit is contained in:
Matthew Taylor 2018-02-19 14:14:38 +00:00
parent cca7fdeeb0
commit efbd24b9be
1 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
exampleSite/content/cont/icons.en.md Normal file
View file

@ -0,0 +1,41 @@
---
title: Icons and logos
weight: 27
---
The Learn theme for Hugo loads the [**Font Awesome**](https://fontawesome.com) 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](https://fontawesome.com/icons?d=gallery&m=free). 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](https://fontawesome.com/icons/heart?style=solid), 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> from Grav and Hugo
```
Which appears as
Built with <i class="fas fa-heart"></i> from Grav 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](https://fontawesome.com/how-to-use/web-fonts-with-css) for more.