CSS 101 question about github icon

[digitalcraftsman]

CSS 101 question about github icon

[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!