100 lines
2.9 KiB
Markdown
100 lines
2.9 KiB
Markdown
|
+++
|
||
|
|
aliases = "/en/cont/icons"
|
||
|
|
description = "Nice icons for your page"
|
||
|
|
title = "Icon"
|
||
|
|
+++
|
||
|
|
|
||
|
|
The `icon` shortcode displays icons in your text.
|
||
|
|
|
||
|
|
The theme uses the [**Font Awesome**](https://fontawesome.com) library, allowing you to easily display any icon or logo available in the Font Awesome free collection.
|
||
|
|
|
||
|
|
{{% icon exclamation-triangle %}}
|
||
|
|
{{% icon angle-double-up %}}
|
||
|
|
{{% icon skull-crossbones %}}
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
While the examples are using shortcodes with positional parameter you are free to also call this shortcode from your own partials.
|
||
|
|
|
||
|
|
{{< tabs groupId="shortcode-parameter">}}
|
||
|
|
{{% tab name="shortcode" %}}
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{%/* icon icon="exclamation-triangle" */%}}
|
||
|
|
{{%/* icon icon="angle-double-up" */%}}
|
||
|
|
{{%/* icon icon="skull-crossbones" */%}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% /tab %}}
|
||
|
|
{{% tab name="shortcode (positional)" %}}
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{%/* icon exclamation-triangle */%}}
|
||
|
|
{{%/* icon angle-double-up */%}}
|
||
|
|
{{%/* icon skull-crossbones */%}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% /tab %}}
|
||
|
|
{{% tab name="partial" %}}
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{ partial "shortcodes/icon.html" (dict
|
||
|
|
"context" .
|
||
|
|
"icon" "exclamation-triangle"
|
||
|
|
)}}
|
||
|
|
{{ partial "shortcodes/icon.html" (dict
|
||
|
|
"context" .
|
||
|
|
"icon" "angle-double-up"
|
||
|
|
)}}
|
||
|
|
{{ partial "shortcodes/icon.html" (dict
|
||
|
|
"context" .
|
||
|
|
"icon" "skull-crossbones"
|
||
|
|
)}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% /tab %}}
|
||
|
|
{{< /tabs >}}
|
||
|
|
|
||
|
|
### Parameter
|
||
|
|
|
||
|
|
| Name | Position | Default | Notes |
|
||
|
|
|:----------------------|:---------|:----------------|:------------|
|
||
|
|
| **icon** | 1 | _<empty>_ | [Font Awesome icon name]({{%relref "#finding-an-icon" %}}) to be displayed. It will be displayed in the text color of its according context. |
|
||
|
|
|
||
|
|
### 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 icon name and paste into the Markdown content.
|
||
|
|
|
||
|
|
### 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.
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
|
||
|
|
### Standard Usage
|
||
|
|
|
||
|
|
````go
|
||
|
|
Built with {{%/* icon heart */%}} by Relearn and Hugo
|
||
|
|
````
|
||
|
|
|
||
|
|
Built with {{% icon heart %}} by Relearn and Hugo
|
||
|
|
|
||
|
|
### Advanced HTML Usage
|
||
|
|
|
||
|
|
While the shortcode simplyfies using standard icons, the icon customisation and other advanced features of the Font Awesome library requires you to use HTML directly. Just 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
|
||
|
|
````
|
||
|
|
|
||
|
|
Built with <i class="fas fa-heart"></i> by Relearn and Hugo
|