CSS 101 question about github icon

[kaushalmodi]

Hello,

I would like to customize this theme to add gitlab icon.

So I was looking this this line in header.html:

  {{ with .Site.Social.github }}
    <div class="button button-github" role="button" aria-label="GitHub">
      <a href="https://github.com/{{ . }}" title="@{{ . }} on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
    </div>
    {{ end }}

I understand that something in application.css is putting that github icon in the header:

The CSS looks cryptic, especially in its minified version.

Can you please explain how the CSS is putting this github icon for icon-github class div elements? I do not see a trace of a .svg or .png for this icon anywhere. So I am very much mystified how this works.

Once I understand this, I would like to do the same for gitlab icon.

Can you please also share the non-minified versions of all the .css files in this theme?

Thanks!

[kaushalmodi]

I believe I understand that CSS a bit more.

Looks like the content of the whole icon-github class div block is replaced with \e607 glyph in the Icon font family, and you have those fonts here.

If the gitlab icon is in that font file, how do I know the glyph code? If the icon is not in there, what would be an alternative?

Thanks.

[digitalcraftsman]

Hello @kaushalmodi,

since this theme is a port I didn't created the original ressources. However, I looked at the upstream project.

The glyph code corresponds with an SVG icon font that you can find here. Search for Github and you should see the glyph code as another attribute of the icon. But, as you can see, the current version of the icon font doesn't have a GitLab icon.

Currently, the upstream project get a complete overhaul. In the draft of the release notes I read that GitLab and Bitbucket icons will be added once the original theme is released.

I will port the new version as well once the overhaul is finished and released. You can find the GitLab icon that I mentioned here. Adding it to the theme and a few lines of template code and CSS should allow you to display it on your website.

[kaushalmodi]

Thanks! I tried the below but it did not work ..

1. I downloaded the gitlab-white.svg to /static/images/. (also tried copying it to /images/.)
2. Put the below in partials/header.html:

{{ with .Site.Social.gitlab }}
<div class="button button-gitlab" role="button" aria-label="Gitlab">
    <a href="https://gitlab.com/u/{{ . }}" title="@{{ . }} on Gitlab" target="_blank" class="toggle-button icon icon-gitlab"><img src="/images/gitlab-white.svg"></a>
</div>
{{ end }}

But I get this:

[kaushalmodi]

OK, I finally got this working.. need to added the below to config.toml:

canonifyurls = true

Can you please explain what that option means? I copied it from an example hugo blog config.

How can I not set that option and still have the below work (which now works! with the above setting):

{{ with .Site.Social.gitlab }}
<div class="button button-gitlab" role="button" aria-label="Gitlab">
    <a href="https://gitlab.com/u/{{ . }}" title="@{{ . }} on Gitlab" target="_blank" class="toggle-button icon icon-gitlab"><img src="/images/gitlab-white.svg" height="28" width="28"></a>
</div>

I have copied the .svg file to /static/images/ directory.

Caveat: Had to hard-code the image size to 28 to get the below:

Would you recommend a better way?

Thanks!