GithubHelp home page GithubHelp logo

Comments (4)

janraasch avatar janraasch commented on July 16, 2024

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

from hugo-scroll.

janraasch avatar janraasch commented on July 16, 2024

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 👍🏻 .

from hugo-scroll.

damonlynch avatar damonlynch commented on July 16, 2024

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.

from hugo-scroll.

janraasch avatar janraasch commented on July 16, 2024

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.

from hugo-scroll.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.