hugo-theme-relearn/exampleSite/content/cont/icons.en.md

+++
title = "Icons and logos"
weight = 27
+++

The Relearn 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:

```html
<i class="fas fa-heart"></i>
```

## Including in markdown

Paste the `<i>` HTML into markup and Font Awesome will load the relevant icon.

```html
Built with <i class="fas fa-heart"></i> by Relearn and Hugo
```

Which appears as

Built with <i class="fas fa-heart"></i> 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](https://fontawesome.com/how-to-use/web-fonts-with-css) for more.
theme: convert front matter to TOML #52 remove date field 2021-08-25 11:33:29 +00:00			`+++`
			`title = "Icons and logos"`
			`weight = 27`
			`+++`
Basic usage instructions for Font Awesome library 2018-02-19 14:14:38 +00:00
Rebranding to new theme name - Rename theme from "Learn" to "Relearn" - also change URLs - remove old references - more removal of french and chinese 2021-06-30 12:56:06 +00:00			`The Relearn 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.`
Basic usage instructions for Font Awesome library 2018-02-19 14:14:38 +00:00
			`## 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:`

code highlighter: avoid unstyled blocks in docs #32 The new highlighter does not work to well if no syntax is specified for the code block / code fence / indention. See https://github.com/gohugoio/hugo/pull/8917 2021-08-23 21:32:34 +00:00			```html
Basic usage instructions for Font Awesome library 2018-02-19 14:14:38 +00:00			`<i class="fas fa-heart"></i>`
			```

			`## Including in markdown`

			Paste the `<i>` HTML into markup and Font Awesome will load the relevant icon.

code highlighter: avoid unstyled blocks in docs #32 The new highlighter does not work to well if no syntax is specified for the code block / code fence / indention. See https://github.com/gohugoio/hugo/pull/8917 2021-08-23 21:32:34 +00:00			```html
Docs adjustments #1 2021-07-01 12:35:27 +00:00			`Built with <i class="fas fa-heart"></i> by Relearn and Hugo`
Basic usage instructions for Font Awesome library 2018-02-19 14:14:38 +00:00			```

			`Which appears as`

Docs adjustments #1 2021-07-01 12:35:27 +00:00			`Built with <i class="fas fa-heart"></i> by Relearn and Hugo`
Basic usage instructions for Font Awesome library 2018-02-19 14:14:38 +00:00
			`## 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.`