How to Add Social Icons to About Page and/or Footer?

[pnwlover]

Am new to Hugo and am trying to place Social Icons (GitHub, LinkedIn & Footer) to a specific page (e.g. About page or Footer).

Using: hugo v0.128.2 and the FixIt 2 theme.

Inside my hugo.toml file (which is located in the root folder), have the appropriate values inside this section:

[params.social]
GitHub = "myGitHubUser"
LinkedIn = "myLinkedInUser"
Twitter = "myTwitterUser"

---

Have an About page inside

project_folder
|
|-content
   |
   about.md

about.md:

+++
title = 'About'
date = 2024-07-18T00:55:21-07:00
draft = false
menus = ['main']
class = 'center'
+++

About Me

Tried putting social = true inside the +++ slug section but nothing (GitHub, LinkedIn, and Twitter icons) comes up inside the About page? These icons do come up inside my home page (above my posts) when I set this inside hugo.toml:

[params.home]
  [params.home.profile]
  enable = true
  social = true

How can I make them only appear in a specific page that I want (e.g. About page or Footer) Also, how could I position (right, center, or left) them?

[Lruihao]

In about page, you can set social icons by FontAwesome , for example:

:(fa-brands fa-github fa-fw):: [Lruihao](https://github.com/Lruihao)

render like:

In footer section, you can create a custom file in your project root layouts/partials/custom.html, for example:

{{- define "custom-head" -}}
{{- end -}}

{{- define "custom-profile" -}}
{{- end -}}

{{- define "custom-aside" -}}
{{- end -}}

{{- define "custom-footer" -}}
{{/*  insert here  */}}
<a
  href="https://github.com/Lruihao" 
  title="GitHub"
  target="_blank"
  rel="external nofollow noopener noreferrer"
>
  <i class="fa-brands fa-github-alt fa-fw fa-xl" aria-hidden="true"></i>
</a>
{{- end -}}

{{- define "custom-widgets" -}}
{{- end -}}

{{- define "custom-assets" -}}
{{- end -}}

[pnwlover]

Thank you very much for replying @Lruihao!

1. Social Icons in About page:

Need the social icons to be clickable without the hyperlink next to them inside my About page, under the Title, for example, like this:

Your solution puts the icon and the hyperlink next to it...

Was able to do by adding this inside the layouts/_default/single.html, after line 18:

   <center>
    {{- partial "social" . -}}
   </center>

Changing this inside the default single.html will put these social icons in every new md markdown file I create, correct?

Is there a way I can insert this {{- partial "social" . -}} inside a custom md file or the footer?

2. Social Icons in Footer:

Per your suggestion, I created: layouts/partials/social-icons-footer.html, and inserted your sample code, but don't know how to insert it (the filename) the footer?

Sorry, I am not a web developer and that's the reason I used Hugo (thinking that it would be easy to setup)... There's no easier way to do this using Hugo via FixIt?

[Lruihao]

Well...There's no easier way to do this! Such so-called easier ways all involve complex processing done by those behind the scenes.

So, concerning your question, I have a piece of development advice.

1. Create layouts/partials/custom/social-links.html in your project root, and insert the following content:

   <div class="social-links">
     {{- $socialMap := resources.Get "data/social.yml" | transform.Unmarshal -}}
     {{- $socialArr := slice -}}
     {{- range $key, $value := .Site.Params.social -}}
       {{- $social := $key | lower | index $socialMap | default dict -}}
       {{- if $value -}}
         {{- if reflect.IsMap $value -}}
           {{- with $value.weight -}}
             {{- $social = dict "Weight" . | merge $social -}}
           {{- end -}}
           {{- with $value.prefix -}}
             {{- $social = dict "Prefix" . | merge $social -}}
           {{- end -}}
           {{- with $value.template -}}
             {{- $social = dict "Template" . | merge $social -}}
           {{- end -}}
           {{- with $value.id -}}
             {{- $social = dict "Id" . | merge $social -}}
           {{- end -}}
           {{- with $value.url -}}
             {{- $social = dict "Url" . | merge $social -}}
           {{- end -}}
           {{- with $value.title -}}
             {{- $social = dict "Title" . | merge $social -}}
           {{- end -}}
           {{- with $value.newtab -}}
             {{- $social = dict "Newtab" . | merge $social -}}
           {{- end -}}
           {{- with $value.icon -}}
             {{- $social = dict "Icon" . | merge $social -}}
           {{- end -}}
         {{- else if ne $value true -}}
           {{- $social = dict "Id" $value | merge $social -}}
         {{- end -}}
         {{- if $social.Icon.Simpleicons -}}
           {{- $prefix := ($.Scratch.Get "cdn" | default dict).simpleIconsPrefix -}}
           {{- $social = dict "Prefix" $prefix | dict "Icon" | merge $social -}}
         {{- end -}}
         {{- $socialArr = $socialArr | append $social -}}
       {{- end -}}
     {{- end -}}
     {{- range sort $socialArr "Weight" -}}
       {{- partial "plugin/social.html" . -}}
     {{- end -}}
   </div>

2. Create layouts/partials/custom.html in your project root, and insert the following content:

   {{- define "custom-footer" -}}
     {{ partial "custom/social-links" . }}
   {{- end -}}

3. Create layouts/shortcodes/social-links.html in your project root, and insert the following content:

   {{ partial "custom/social-links" . }}

4. Create assets/css/_custom.scss in your project root, and insert the following content:

   // ==============================
   // Custom style
   // ==============================
   
   .single {
     .content {
       .social-links {
         text-align: center;
         padding: 0.5rem;
         font-size: 1.5rem;
       
         a {
           vertical-align: middle;
         }
       
         @include link(true, true);
       }
     }
   }

   PS: You can define the global style for your blog in this _custom.scss file.

After that, you can insert your social icon links in any page using shortcode {{< social-links >}}.

Preview like:

• Social Icons in About page:

  

• Social Icons in Footer:

  

[pnwlover]

Many thanks @Lruihao!

This not only helps me learn how to reuse these throughout the codebase but the icons are also larger which helps a lot, as well.

Using your code with the Light theme:

And the Footer:

However, with the Dark theme, these icons are not as visible because they are still Dark:

And the Footer:

When I use my original solution: {{- partial "social" . -}} the icons are not as large but they are visible in both the Light and Dark themes...

Here's what they look like for the Dark theme:

About Me (Dark):

And the Footer:

Is there a way to fix this for the Dark theme?

Thank you very much for your hard work and help! FixIt is by far the best Hugo template, I've found (after trying out many)!

[Lruihao]

@pnwlover Oh, my carelessness! I have revised the above steps. (revised step 1 and add step 4)

[pnwlover]

This worked! Now, the social icons look blue with the White theme inside the About page, which looks cool (helps distinguish from the fixed ones in the Footer). Thank you! This is awesome!

It would be nice if this was an included feature, its weird that in the main Hugo repo, you can put social_links: true in the slug but it doesn't work with FixIt.

Consider this request closed!