How do I add custom social links in chirpy?

[iSpeakNerd]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

Would like to add custom social links with icons in the sidebar footer and author on posts.

Operations you have already tried

I found a few jekyll references but most are for the default theme Minima rather than Chirpy specifically.

• https://old.reddit.com/r/Jekyll/comments/1co7fke/deleted_by_user/
• this discussion is specifically for icons Custom (non Font Awesome) icons for `contact.yml` #1763
• https://blog.jakelee.co.uk/adding-new-social-media-link-to-minima/

The blog post references footer.html and social.html neither of which are in chirpy starter. I see social: section of _config.yml for adding links (which doesn't seem to change the sidebar footer?) but how do i add the svg for the links in the footer and authorship as well as associate them to the correct url?

Anything else?

my current socials settings in _config.yml

social:
  # Change to your full name.
  # It will be displayed as the default author of the posts and the copyright owner in the Footer
  name: iSpeakNerd
  # email: # change to your email address
  links:
    # The first element serves as the copyright owner's link
    - https://twitter.com/ispeak_nerd # change to your Twitter homepage
    - https://github.com/ispeaknerd # change to your GitHub homepage
    - https://warpcast.com/ispeaknerd # change to your Warpcast homepage
    # Uncomment below to add more social links
    # - https://www.facebook.com/username
    - https://www.linkedin.com/in/ispeaknerd
    - https://paragraph.xyz/@ispeaknerd.eth

[SoumyaK4]

You can add them in _data/contact.yml for sidebar social links.

For modifying footer look in _includes/footer.html

[iSpeakNerd]

thanks for replying! I don't have an _includes folder so I should just create it and the footer.html file within?

[SoumyaK4]

Check here https://github.com/cotes2020/jekyll-theme-chirpy

[iSpeakNerd]

what finally worked for me:

1. follow steps to create custom icons as fonts from Custom (non Font Awesome) icons for `contact.yml` #1763 (comment)
2. overwrite default chirpy theme css file with appended css from icomoon solution, inspired by coats Custom CSS not loading #2158 (comment)

---
---

@use 'main
{%- if jekyll.environment == 'production' -%}
  .bundle
{%- endif -%}
';

/* append your custom style below */

@font-face {
  font-family: 'icomoon';
  src: url('/assets/fonts/icomoon.eot?weotyf');
  src: url('/assets/fonts/icomoon.eot?weotyf#iefix') format('embedded-opentype'),
    url('/assets/fonts/icomoon.ttf?weotyf') format('truetype'),
    url('/assets/fonts/icomoon.woff?weotyf') format('woff'),
    url('/assets/fonts/icomoon.svg?weotyf#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^='icon-'],
[class*=' icon-'] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fc-arch:before {
  content: '\e900';
}
.icon-fc-arch-inverted:before {
  content: '\e901';
}

3. add custom contact links in _data/contact.yml following suggestion by @SoumyaK4 How do I add custom social links in chirpy? #2172 (comment)

- type: farcaster
  icon: "icon-fc-arch"
  url: "https://warpcast.com/ispeaknerd"

Note: cannot change icon names after downloading from icomoon, so make sure your svg files are named however you want to reference them

[SoumyaK4]

You're making it too complicated....
You should follow my previous suggestion....
The only changes you need as per your original post should be in _data/contact.yml
Try looking in other's codes who use chirpy...
Example

[tis-starlight]

It looks fine on local serve but displays weird when merged and served by github pages

---

Remove the extra spaces around production in the jekyll-theme-chirpy.scss file and don’t use Prettier to format the document.

- {%- if jekyll.environment == ' production ' -%}
+ {%- if jekyll.environment == 'production' -%}

[iSpeakNerd]

@SoumyaK4 that works if you are using an icon served by font awesome, i see in your linked _data/contact.yml

- type: website
  icon: "fas fa-s"
  url: "https://soumyak4.in"
  noblank: true

icon: "fas fa-s" but i have a custom svg not found in fa, hence the extra stuff

[iSpeakNerd]

thanks @tis-starlight that fixed it, updated the solution with that change

p.s. how did you get red and green highlighting inside the code block?
edit: https://github.com/orgs/community/discussions/42489#discussioncomment-6702467

[tis-starlight]

```diff
- int a = 10;
+ int a = 12;
```

- int a = 10;
+ int a = 12;