From 101c01b54205bfc42b8ecf7b3f39419b4acf7bc8 Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Tue, 21 Dec 2021 09:11:00 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Add=20icons=20reference=20to=20d?= =?UTF-8?q?ocs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- exampleSite/content/docs/partials.md | 6 ++- exampleSite/content/docs/shortcodes.md | 4 +- exampleSite/content/samples/icons.md | 58 ++++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 exampleSite/content/samples/icons.md diff --git a/exampleSite/content/docs/partials.md b/exampleSite/content/docs/partials.md index 6f9e3a71..8c8c69c8 100644 --- a/exampleSite/content/docs/partials.md +++ b/exampleSite/content/docs/partials.md @@ -72,7 +72,11 @@ Similar to the [icon shortcode]({{< ref "shortcodes#icon" >}}), you can include {{ 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 diff --git a/exampleSite/content/docs/shortcodes.md b/exampleSite/content/docs/shortcodes.md index cd059f93..4b6a0f37 100644 --- a/exampleSite/content/docs/shortcodes.md +++ b/exampleSite/content/docs/shortcodes.md @@ -107,7 +107,9 @@ You can see some additional Chart.js examples on the [charts samples]({{< ref "c **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" >}}). diff --git a/exampleSite/content/samples/icons.md b/exampleSite/content/samples/icons.md new file mode 100644 index 00000000..66c4edc4 --- /dev/null +++ b/exampleSite/content/samples/icons.md @@ -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 >}} |