marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

📝 Add icons reference to docs

pull/61/head
James Panther 2021-12-21 09:11:00 +11:00
parent 6066f87122
commit 101c01b542
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
3 changed files with 66 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
exampleSite/content/docs/partials.md
View File

@ -72,7 +72,11 @@ Similar to the [icon shortcode]({{< ref "shortcodes#icon" >}}), you can include
{{ partial "icon.html" "github" }} {{ partial "icon.html" "github" }}
``` ```
Congo includes a number of built-in icons for social, links and other purposes. You can also provide your own icon assets by including the SVG in `assets/icons/`. Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the partial by using the SVG filename without the `.svg` extension.
Icons can also be used in article content by calling the [icon shortcode]({{< ref "shortcodes#icon" >}}).
## Extensions ## Extensions

4
exampleSite/content/docs/shortcodes.md
View File

@ -107,7 +107,9 @@ You can see some additional Chart.js examples on the [charts samples]({{< ref "c
**Output:** {{< icon "github" >}} **Output:** {{< icon "github" >}}
Icons are populated using Hugo pipelines which makes them very flexible. Congo ships with a default set of icons for social, email, and generic links. If you want to add your own icons, you can simply place them in `/assets/icons/` and reference them using the `icon` shortcode passing in the icon's filename (without the `.svg.` extension). Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the `.svg` extension.
Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}). Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}).

58
exampleSite/content/samples/icons.md 100644
View File

@ -0,0 +1,58 @@
---
title: "Icons"
date: 2020-08-14
draft: false
description: "Icon support in Congo."
slug: "icons"
tags: ["icons", "sample", "shortcodes"]
---
Congo has built-in support for a number of [FontAwesome 5](https://fontawesome.com/icons) icons. These can be included in your website through either the [icon partial]({{< ref "docs/partials#icon" >}}) or [icon shortcode]({{< ref "docs/shortcodes#icon" >}}).
Additionally, custom icons are also fully supported. Simply provide your own SVG icon assets by placing them in the `assets/icons/` directory in the root of your project. Any icons in the icons directory will then be available to use throughout the theme.
The full list of built-in icons and their corresponding names can referenced below.
| Icon name | Preview |
| -------------------- | --------------------------------- |
| amazon | {{< icon amazon >}} |
| apple | {{< icon apple >}} |
| codepen | {{< icon codepen >}} |
| dev | {{< icon dev >}} |
| dribbble | {{< icon dribbble >}} |
| edit | {{< icon edit >}} |
| email | {{< icon email >}} |
| exclamation-triangle | {{< icon exclamation-triangle >}} |
| facebook | {{< icon facebook >}} |
| flickr | {{< icon flickr >}} |
| foursquare | {{< icon foursquare >}} |
| github | {{< icon github >}} |
| gitlab | {{< icon gitlab >}} |
| google | {{< icon google >}} |
| instagram | {{< icon instagram >}} |
| keybase | {{< icon keybase >}} |
| kickstarter | {{< icon kickstarter >}} |
| lastfm | {{< icon lastfm >}} |
| link | {{< icon link >}} |
| linkedin | {{< icon linkedin >}} |
| mastodon | {{< icon mastodon >}} |
| medium | {{< icon medium >}} |
| microsoft | {{< icon microsoft >}} |
| moon | {{< icon moon >}} |
| orcid | {{< icon orcid >}} |
| patreon | {{< icon patreon >}} |
| pinterest | {{< icon pinterest >}} |
| reddit | {{< icon reddit >}} |
| researchgate | {{< icon researchgate >}} |
| slack | {{< icon slack >}} |
| snapchat | {{< icon snapchat >}} |
| soundcloud | {{< icon soundcloud >}} |
| steam | {{< icon steam >}} |
| sun | {{< icon sun >}} |
| telegram | {{< icon telegram >}} |
| tiktok | {{< icon tiktok >}} |
| tumblr | {{< icon tumblr >}} |
| twitch | {{< icon twitch >}} |
| twitter | {{< icon twitter >}} |
| whatsapp | {{< icon whatsapp >}} |
| youtube | {{< icon youtube >}} |