Hugo-coder: Other Social Params

[bemason]

I would like to add Google Scholar, Email, and another website with my own icon to the Social Params. How do I do that?

[luizdepra]

You could crate a custom CSS class for each icon and put it in the icon attribute of the desired social item.

[sidelux]

You should add one block (in config) like:

[[params.social]]
    name = "Telegram"
    icon = "fab fa-telegram fa-2x"
    weight = 1
    url = "https://telegram.me/fenix45/"

Then replace icon with one of FontAwesome Icons.
_Weight_ should be an incremental number for each icon.

[luizdepra]

I just found out that the social icons are not sorted correctly. I'm fixing it right now.

[bemason]

Can we access the Academic icons the same way we can access the original font awesome files? https://jpswalsh.github.io/academicons/

[luizdepra]

Yes, by downloading the academicons.min.css, placing it in your project static folder and adding it into the custom_css configuration. Then, you just need to put the desired icon CSS class in the icon field of any social item.

You could also change this theme files adding:

<link rel="stylesheet" href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css">

after this line: https://github.com/luizdepra/hugo-coder/blob/master/layouts/_default/baseof.html#L25

[bemason]

Yes, by downloading the academicons.min.css, placing it in your project static folder and adding it into the custom_css configuration. Then, you just need to put the desired icon CSS class in the icon field of any social item.

You could also change this theme files adding:

<link rel="stylesheet" href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css">

after this line: https://github.com/luizdepra/hugo-coder/blob/master/layouts/_default/baseof.html#L25

Thank you! I'm new to creating websites!

[anyosa]

Yes, by downloading the academicons.min.css, placing it in your project static folder and adding it into the custom_css configuration. Then, you just need to put the desired icon CSS class in the icon field of any social item.

You could also change this theme files adding:

<link rel="stylesheet" href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css">

after this line: https://github.com/luizdepra/hugo-coder/blob/master/layouts/_default/baseof.html#L25

Hi Luiz,

I went until copying the academicons.min.css in the static folder. Got lost in the following steps. Is it possible to get some help for them?

Thanks!

[clement-pannetier]

Hi @anyosa,

You have to options:

1. You copy the academicons.min.css in static/css and academicons.ttf in static/fonts
   You add this line to config.toml: custom_css = ["css/academicons.min.css"]
   You add a new social entry:

[[params.social]]
    name = "Academia"
    icon = "ia ia-academia"
    weight = 1
    url = "https://jpswalsh.github.io/academicons/" 

1. Or simply follow this:
   > You could also change this theme files adding:
   <link rel="stylesheet" href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css">
   after this line: https://github.com/luizdepra/hugo-coder/blob/master/layouts/_default/baseof.html#L31

And add the new social entry like above.

[anyosa]

Hi @clement-pannetier, thanks! but tried both options and no success so far. The icon just doesn't appear.
(Do you know the name of the google scholar icon? Or where can I find the different icon names of academicons?)

[anyosa]

I managed to make it work! It was only about the icon name.
Thank you @clement-pannetier 👍.