Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incorporating icons, like Academicons #9

Closed
damonlynch opened this issue Sep 8, 2020 · 4 comments
Closed

Incorporating icons, like Academicons #9

damonlynch opened this issue Sep 8, 2020 · 4 comments
Labels
Improve docs A question about how to use the theme

Comments

@damonlynch
Copy link
Contributor

A suggestion: to make the theme more welcoming to academics looking for a more stylish personal website than other Hugo theme options, consider making it easy to include Academicons.

I assume it doesn't take many steps to do, if you already know how. The thing is, of course, learning how!

On a related issue, perhaps it is worth mentioning something about font awesome icons too? For example, are are the free ones built-in and ready to incorporate with the right code, like you do in themes/hugo-scroll/index.html? Or does the user need to take additional steps to be able to make use of other icons?
@janraasch
Copy link
Collaborator

Hi @damonlynch, I see you are making good progress on your website 👍🏻. Let me reply in two parts:

1. Using external icon sets (e.g. Academicons)

You simply need to include the respective stylesheet; in your case, that would be

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">

in the <head>-tag of your site.

To achieve this, you may create a layouts/partials/custom_head.html in your site's root directory containing this line:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">

With the stylesheet available you can then use the icons as it is described on their website, i.e., using <i>-tags like

<i class="ai ai-google-scholar-square"></i>

in your .html-content.

If you want to use icons in .md-files, you could enable HTML-rendering via adding

[markup]
    [markup.goldmark]
        [markup.goldmark.renderer]
            unsafe = true

to your config.toml.

2. What's built-in?

You are correct, this is a little bit of a hidden feature at the moment 😸, but as you already saw, there is an icon on the header of the start page. This theme currently includes font-awesome v4.0.3 for that purpose. You can check out https://fontawesome.com/v4.7.0/cheatsheet/ for a list of all icons.

You can use all those icons in .html via <i>-tags <i class="fa fa-envelope"></i>. Again, if you want to use theme in .md-files, you need to enable unsafe-rendering for markdown, see above.

2.5 😅 Future Work

To make using icons in .md-files a lot nicer / user-friendly, we could introduce a shortcode. Then, you would not need to enable unsafe-rendering and could write something like

{{< i class="fa fa-envelope">}} Mail me!

in your usual .md-file.

You can add this functionality locally by creating a layouts/shortcodes/i.html-file with the following content:

{{ with .Get "class" }}<i class="{{ . }}"></i>{{ end }}

I hope that helps 😄 . Let me know if this works for you.

Kind regards,
Jan

@janraasch janraasch added documentation Improve docs A question about how to use the theme labels Sep 9, 2020
@janraasch
Copy link
Collaborator

Hi @damonlynch, I saw that you added icons to the »contact«-section of https://damonlynch.net/, so I suppose we can close this issue.

By the way, I really like what you did with the theme. https://damonlynch.net/ looks very nice 👍🏻 .

@damonlynch
Copy link
Contributor Author

Thanks Jan for the detailed instructions, and for your kind words! Do you want the theme's README.md updated to include some of this information? Of course you probably don't want to overwhelm that page with extraneous information, but I suppose a hint that it's possible to add these features easily might provide enough encouragement for others to also use your theme.

If you do like this idea, I can try to figure out how to do it in git and make a pull request. I'm very new to git but I need to figure git basics out at some point.

@janraasch
Copy link
Collaborator

Hi @damonlynch, I took the time

  • to update the included font-awesome-icons to v4.7.0 (edc1493)
  • add an icon-shortcode and add an "Using icons"-section to the README.md (bde8291).

What do you think? Is that good enough?

PS:

I'm very new to git but I need to figure git basics out at some point.

If it's just about editing some .md-files for documentation, you might also want to try to use the Github-UI directly to make up a pull request.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Improve docs A question about how to use the theme
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@janraasch @damonlynch