stevelane / hugo-icon

Icon theme for Hugo

Icon Theme

This theme is a Hugo port of the icon theme by https://freehtml5.co/. It is a single-page, responsive theme, with sections for describing your business mission, services, a gallery, your team and a contact form.

Installation

Follow the themes guide on the Hugo website. Briefly, within your Hugo folder:

$ cd themes
$ git clone https://github.com/SteveLane/hugo-icon.git

Getting started

Copy exampleSite/config.toml into the root of your website folder, and edit it to your hearts content!

Add theme = "hugo-icon" to this config, or when serving, use hugo server -t hugo-icon.

Adding additional pages

If you'd like to add additional pages, say for a blog, place your content in /content/blog/ (with an _index.md and additional markdown files for each entry).

To link to it from the main menu, add the following line to layouts/partials/nav.html:

<a href="/blog" onclick="location.href='/blog';">Blog</a>

Credits

Credit for this theme goes fully to https://freehtml5.co/, which is licensed under a CC BY 3.0 license. If you use this Hugo port, please consider the terms of that license and make proper attribution to https://freehtml5.co/.

Changelog

A changelog for the initial port by @SteveLane is here; if you fork this theme and make changes, please list them.

hugo-icon's Issues

Jquery and Bootstrap

Hello Steve,
Re:
https://discourse.gohugo.io/t/hugo-theme-jquery-and-bootstrap-vulnerabilities/19727
I am wondering if anything can be done to address the security concerns around Jquery and Bootstrap versions.
I really like the theme, but am concerned it may be a bit outdated.
Regards,

Multiple language support

Thanks for the nice theme. Is it possible to support multiple languages in this theme?

Blog page instructions and content

I followed the instructions for adding a Blog section to Icon.

The Blog menu item was added but I can not get any content to render. Only <pre> tag.

Could you possibly add a file in the example site blog content which will render when the instructions are followed? This would clear up any confusion and add value to the theme. Thanks!

Use section page templates instead of config.toml

Originally posted by @braian125 in #27 (comment)

---

When I refer to base template, I don't only refer to not limiting the use of the content from the config.toml (It's well done), but instead, expand and promote the use of section page templates, the theme that you publish is amazing, but with great respect, I made changes to improve the ease of making publications in a production site:

1. The menu you implement it from the config.toml

# Navigation section
[params.nav]
  mission = "Our Mission"
  services = "Services"
  team = "The Team"
  contact = "Get In Touch"
  # Include logo instead if HOME:
  # logo = "path/to/logo"

I preferred to use the front matter method of defining menu entries:

<ul class="fh5co-menu-1" aria-label="menu">`
   {{ $current := . }}
   {{ range .Site.Menus.main }}
        <li class="" aria-label="{{ .Name }}">
           <a href="{{ .URL }}" data-nav-section="{{ lower .Name }}" class="menu__items__item__link {{ if $current.IsMenuCurrent "main" . }}active{{ end }}" alt="{{ .Name }}" role="menuitem">
                {{ upper .Title }}
           </a>
       </li>
  {{ end }}
</ul>

2. The content of the site is limited to changing the config.toml, and I think it is more efficient to link it to Front Matter, so I deleted a certain logic from its configuration file and adapted it to the folder content.

{{ range first 3 (where .Site.RegularPages ".Type" "areas") }}
     <div class="col-md-6">
          <div class="service">
               <div class="icon"><img src="{{ .Params.icon }}"></div>
               <h3>{{ .Title | markdownify }}</h3>
               <p>{{ .Content | markdownify }}</p>
          </div>
    </div>
{{end}}

in team section, adding 4th and 5th persons , they are not correctly align into 2 rows.

Configurable url for contacts form

Please add parameter to configuration file for changing action in contacts form.
https://github.com/SteveLane/hugo-icon/blob/master/layouts/partials/contact-form.html#L9
For example https://formspree.io/ supports same fields so netlify can be transparent replaced with self-hosted server + formspree

License MIT vs CC BY 3.0 l

According to the MIT license (also stated as MIT on https://themes.gohugo.io/hugo-icon/ ) I am allowed to use/modify this theme however I see fit, but https://themes.gohugo.io/hugo-icon/ states otherwise.

I have no issue with paying money for the theme, but it would be nice if it was stated somewhere that this is not actually licensed under MIT if it is not.

Great port btw, super easy to customize 👍

Making the theme "Hugo" Friendly

Hi @SteveLane ,

Thank you for this project - It is very good skin in terms of design and simplicity.
However, the current way to setup the themes is strictly through config.toml which is not very Hugo friendly (adding text / items is really hard work).

I already modified that largely on my own project, but this will break the current implementation.
Let me know if you wish me to create a pull request or just preferred me to keep my own branch.

Cheers,
Dudi

add example site

codes not interpreted in [[params.mission.item]]

I have
[[params.mission.item]]
subtitle = "this and that with a super^script"

but the ^{tag is displayed just as - it doesn't get turned into a superscript. Is this something that can be fixed in the theme?}

Thanks

Netlify deploy a blank page

I built a hugo-icon web page on RStudio using blogdown (@yihui).
The deploy in the local host was perfect and very nice.
However, when I go to Netlify for deploy, the outcome is a blank page.
I checked for url basename and it corresponds to my domain.

Here the deploy details from Netlify:
12:24:48 AM: Build ready to start
12:24:51 AM: build-image version: 84aca9ba39e0ee86ba194760fbfc51a808f62543
12:24:51 AM: buildbot version: 1ac64ca11e029436ed45ac81a38b9839778ec314
12:24:51 AM: Fetching cached dependencies
12:24:51 AM: Starting to download cache of 70.1MB
12:24:51 AM: Finished downloading cache in 309.774013ms
12:24:51 AM: Starting to extract cache
12:24:53 AM: Finished extracting cache in 1.389418327s
12:24:53 AM: Finished fetching cache in 1.735306961s
12:24:53 AM: Starting to prepare the repo for build
12:24:53 AM: Preparing Git Reference refs/heads/master
12:24:54 AM: Starting build script
12:24:54 AM: Installing dependencies
12:24:54 AM: Started restoring cached node version
12:24:56 AM: Finished restoring cached node version
12:24:56 AM: v8.15.1 is already installed.
12:24:57 AM: Now using node v8.15.1 (npm v6.4.1)
12:24:57 AM: Attempting ruby version 2.3.6, read from environment
12:24:58 AM: Using ruby version 2.3.6
12:24:59 AM: Using PHP version 5.6
12:24:59 AM: Installing Hugo 0.49.2
12:24:59 AM: Started restoring cached go cache
12:24:59 AM: Finished restoring cached go cache
12:24:59 AM: unset GOOS;
12:24:59 AM: unset GOARCH;
12:24:59 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.10.linux.amd64';
12:24:59 AM: export PATH="/opt/buildhome/.gimme/versions/go1.10.linux.amd64/bin:${PATH}";
12:24:59 AM: go version >&2;
12:24:59 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.10.linux.amd64.env';
12:24:59 AM: go version go1.10 linux/amd64
12:24:59 AM: Installing missing commands
12:24:59 AM: Verify run directory
12:24:59 AM: Executing user command: hugo
12:24:59 AM: Building sites …
12:24:59 AM:
12:24:59 AM: | EN
12:24:59 AM: +------------------+----+
12:24:59 AM: Pages | 10
12:24:59 AM: Paginator pages |
12:24:59 AM: 0
12:24:59 AM: Non-page files | 0
12:24:59 AM: Static files | 90
12:24:59 AM: Processed images | 0
12:24:59 AM: Aliases | 0
12:24:59 AM: Sitemaps |
12:24:59 AM: 1
12:24:59 AM: Cleaned | 0
12:24:59 AM: Total in 24 ms
12:24:59 AM: Caching artifacts
12:24:59 AM: Started saving pip cache
12:24:59 AM: Finished saving pip cache
12:24:59 AM: Started saving emacs cask dependencies
12:24:59 AM: Finished saving emacs cask dependencies
12:24:59 AM: Started saving maven dependencies
12:24:59 AM: Finished saving maven dependencies
12:24:59 AM: Started saving boot dependencies
12:24:59 AM: Finished saving boot dependencies
12:24:59 AM: Started saving go dependencies
12:24:59 AM: Finished saving go dependencies
12:24:59 AM: Build script success
12:24:59 AM: Starting to deploy site from 'public'
12:24:59 AM: Starting post processing
12:25:00 AM: Post processing done
12:25:00 AM: Site is live
12:25:10 AM: Finished processing build request in 19.357107448s
12:25:10 AM: Shutting down logging, 0 messages pending

Many thanks, @maordano

How to add non-section link to nav?

I'm trying to add a "Blog" link to the main nav so I can link to /blog, but I can't find any examples or documentation on how to add a link to the main nav that doesn't go to a section.

Is this possible? If so, how?

Thanks for the theme!

Add doc for sections

Thanks for this theme! Works great out of the box, but it would be great to link to / provide some documentation, even rough, on how to customize the different sections, or add new sections. For instance, I am trying to change the 'register' section to a standard html + iframe google doc.

Alt functionality for images

So far I haven't found a way to add alt text descriptions to images. Is this possible?

Fix js for contact links.

As per this comment, the mission and services contact buttons don't send the user to the contact section.

I think a function similar to this one should work.

How to add a new social icon ?

Hello

I would like to add a social icon for gitlab or for example a python icon for the service section.

I look quickly a the icomoon.css and simple-line-icons.css but I do not understand precisely what I must add in that files. Are the font from fontawesome ? I tried to obtain the character code from the website but it does not work.

Thanks
Germain