From bde829194418d599c41187d6b54cbe7bb1d3ce80 Mon Sep 17 00:00:00 2001
From: Jan Raasch <jan@janraasch.com>
Date: Mon, 21 Sep 2020 13:52:32 +0200
Subject: [PATCH] feat: add "icon"-shortcode

---
 README.md                               | 13 +++++++++++++
 exampleSite/content/homepage/contact.md |  4 ++--
 layouts/shortcodes/icon.html            |  1 +
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 layouts/shortcodes/icon.html

diff --git a/README.md b/README.md
index 6d72c6b..ed1de64 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,16 @@ To create **a page separate from the homepage**, run
 hugo new my-new-page.md
 ```
 
+### Using icons
+
+This theme includes the full set of [Font Awesome v4 Icons][font-awesome-icons]. Use the `{{<icon>}}`-[shortcode][hugo-shortcodes] with the respective "fa fa-ICONNAME"-`class` to use an icon directly in your `.markdown` files à la
+
+```markdown
+Look at this nice »envelope«-icon: {{<icon class="fa fa-envelope">}}. I took this from https://fontawesome.com/v4.7.0/icon/envelope :-)
+```
+
+For the full list of icons, see [Font Awesome v4 Icons][font-awesome-icons].
+
 ### Adding your branding / colors / css
 
 Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `<style>`-tag _or_ you may add a `<link>`-tag referencing your own `custom.css` (in case you prefer to have a separate `.css`-file). Checkout the [`custom_head.html`](https://github.com/janraasch/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html)-file from the `exampleSite`-directory to get started and to find more detailed instructions.
@@ -82,3 +92,6 @@ If you do not have a GitHub-account, feel free to hit me up via e-mail (see [jan
 [paypal-svg]: https://img.shields.io/badge/onetime-donation-11dde2.svg?logo=paypal
 [github-sponsors-svg]: https://img.shields.io/badge/recurring-sponsorship-ee4aaa.svg?logo=github
 [hugo-setup-guide]: https://gohugo.io/getting-started/installing
+[font-awesome]: https://fontawesome.com/v4.7.0
+[font-awesome-icons]: https://fontawesome.com/v4.7.0/icons/
+[hugo-shortcodes]: https://gohugo.io/content-management/shortcodes/
diff --git a/exampleSite/content/homepage/contact.md b/exampleSite/content/homepage/contact.md
index f28a3bb..32895c8 100644
--- a/exampleSite/content/homepage/contact.md
+++ b/exampleSite/content/homepage/contact.md
@@ -4,8 +4,8 @@ weight: 4
 header_menu: true
 ---
 
-E-Mail: [mail@janedoe.com](mailto:your-email@your-domain.com)
+{{<icon class="fa fa-envelope">}} [mail@janedoe.com](mailto:your-email@your-domain.com)
 
-Tel.: [+49 1111 555555](tel:+491111555555)
+{{<icon class="fa fa-phone">}} [+49 1111 555555](tel:+491111555555)
 
 Let us get in touch!
diff --git a/layouts/shortcodes/icon.html b/layouts/shortcodes/icon.html
new file mode 100644
index 0000000..673742b
--- /dev/null
+++ b/layouts/shortcodes/icon.html
@@ -0,0 +1 @@
+{{ with .Get "class" }}<i class="{{ . }}"></i>{{ end }}