Initial check-in after refactoring to use Hugo site generator with ReLearn template. HTTP Status Codes page not done--nor adwords added.
This commit is contained in:
41
themes/relearn/exampleSite/content/cont/icons.en.md
Normal file
41
themes/relearn/exampleSite/content/cont/icons.en.md
Normal file
@ -0,0 +1,41 @@
|
||||
+++
|
||||
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/v5/search?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/v5/icons/heart?s=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 color (by default the icon will inherit the parent color)
|
||||
* 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.
|
||||
Reference in New Issue
Block a user