diff options
author | Jan Raasch <jan@janraasch.com> | 2020-09-21 14:52:32 +0300 |
---|---|---|
committer | Jan Raasch <jan@janraasch.com> | 2020-09-21 14:52:32 +0300 |
commit | bde829194418d599c41187d6b54cbe7bb1d3ce80 (patch) | |
tree | e7972682027f2c42039d2164eda33a95edbce569 | |
parent | 90d0a1842357aaef7b06142eb73fc1e3eba9c998 (diff) |
feat: add "icon"-shortcode
-rw-r--r-- | README.md | 13 | ||||
-rw-r--r-- | exampleSite/content/homepage/contact.md | 4 | ||||
-rw-r--r-- | layouts/shortcodes/icon.html | 1 |
3 files changed, 16 insertions, 2 deletions
@@ -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 }} |