Welcome to mirror list, hosted at ThFree Co, Russian Federation.

_index.md « icon « shortcodes « content « exampleSite - github.com/vjeantet/hugo-theme-docport.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
blob: 5dad30260a6e9ec96debcef171d6b29d466d2055 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
+++
title = "icon"
description = "Display an icon."
+++

Display one of the 2 298 icons like 
{{% icon name="fa-address-card" size="64px" %}}
{{% icon name="fa-bell" size="32px"%}} 
{{% icon fa-apple b %}} 

It uses :

* font-awesome 5 free icons library .[more info here](https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free/)

This `icon` shortcode will display an icon in your page. 

## Usage

| Parameter | Default | Description |
|:--|:--|:--|
| name | **required** | name of icon (see bellow) |
| size | none | size of icon, medium, xx-small, x-small, small, large, x-large, xx-large, 11px, 2em, 20%.... |
| style | `fas` | use `fas` for solid or `fab` for brands [see here](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use)|

{{%alert info%}}
**Tips :**
setting only the name as argument works too : 
```{{</*icon fa-film*/>}}` instead of `{{</*icon name="fa-film"*/>}}```

Type a `b` letter after the name to use the brand version of FontAwesome
```{{</*icon fa-facebook b*/>}}` instead of `{{</*icon name="fa-film"*/>}}```


{{%/alert%}}

## Demo
```
	{{</* icon name="fa-save" size="64px" */>}}
	{{</* icon name="fa-save" size="32px" */>}}
	{{</* icon fa-save */>}}
```
{{<icon name="fa-save" size="64px">}}
{{<icon name="fa-save" size="32px">}}
{{<icon fa-save>}}

```
	{{</* icon name="fa-github" style="fab" size="64px" */>}}
	{{</* icon name="fa-github" style="fab" size="32px" */>}}
	{{</* icon fa-github b */>}}
```
{{<icon name="fa-github" style="fab" size="64px">}}
{{<icon name="fa-github" style="fab" size="32px">}}
{{<icon fa-github b>}}


## icons available
* https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free/