diff options
Diffstat (limited to 'exampleSite/content/shortcodes/icon/_index.md')
| -rw-r--r-- | exampleSite/content/shortcodes/icon/_index.md | 35 |
1 files changed, 28 insertions, 7 deletions
diff --git a/exampleSite/content/shortcodes/icon/_index.md b/exampleSite/content/shortcodes/icon/_index.md index b194066..5dad302 100644 --- a/exampleSite/content/shortcodes/icon/_index.md +++ b/exampleSite/content/shortcodes/icon/_index.md @@ -3,11 +3,14 @@ title = "icon" description = "Display an icon." +++ -Display an icon like {{% icon cloud %}} +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 : -* materialize icons library .[more info here](https://material.io/resources/icons/) +* 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. @@ -17,20 +20,38 @@ This `icon` shortcode will display an icon in your page. |:--|:--|:--| | 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 film*/>}}` instead of `{{</*icon name="film"*/>}}` +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="save" size="64px" */>}} + {{</* icon name="fa-save" size="64px" */>}} + {{</* icon name="fa-save" size="32px" */>}} + {{</* icon fa-save */>}} ``` -{{<icon name="save" size="64px">}} +{{<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://material.io/resources/icons/?icon=attach_file&style=baseline
\ No newline at end of file +* https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free/
\ No newline at end of file |