Need to add custom social icon

[justinryanc]

I am not seeing "500px" in the official bootstrap-icon library. How would I go about calling a custom image to show under social: or could you add support for this?

[willfaught]

What is 500px? A website?

[justinryanc]

It's a photo sharing website like Flickr. Just need a 500px social icon to link to my 500px profile.

[willfaught]

The social icons come from the Bootstrap Icons web font, so their size scales with the applicable text size. Currently, in the home layout, they're sized to display-6:

<p class="display-6 text-center">{{ partial "paige/social.html" $page }}</p>

I don't think there's a way to make a regular image file scale along with the rest of the icons. You would have to carefully pick a font size that would match the size of the 500px logo image you have, and then never change it. But the image wouldn't scale with the size of the text if, say, the user changes the page zoom.

Your best bet might be to mix in another web font that does have a 500px logo. Do you know of one?

[willfaught]

Is this it? https://fontawesome.com/icons/500px?s=&f=brands

[justinryanc]

Yup that is it!

[willfaught]

In v0.49.0, I changed paige.social.*.bootstrap_icon to .class. For example:

paige:
  social:
    github:
      class: "bi bi-github"

Now you can use your own web font class names, including fa-brands fa-500px for Font Awesome. Don't forget to include Font Awesome in the page.

[justinryanc]

In v0.49.0, I changed paige.social.*.bootstrap_icon to .class. For example:

paige:
  social:
    github:
      class: "bi bi-github"

Now you can use your own web font class names, including fa-brands fa-500px for Font Awesome. Don't forget to include Font Awesome in the page.

I appreciate you adding support for Font Awesome, but how would I include Font Awesome in the page?

I have added this but it doesn't show an icon.

social:
1:
class: "fa-brands fa-500px"
name: "500px"
url: ""

[willfaught]

You have to include Font Awesome yourself. See https://github.com/willfaught/paige#include. For example, in your site's layouts/partials/paige/header-last.html, you could put:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">

For more info (I've never used FA personally), take a look at https://stackoverflow.com/questions/71201741/how-to-use-font-awesome-6-icons or https://fontawesome.com/docs/web/setup/get-started or https://cdn.fontawesome.com.

[justinryanc]

You have to include Font Awesome yourself. See https://github.com/willfaught/paige#include. For example, in your site's layouts/partials/paige/header-last.html, you could put:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">

For more info (I've never used FA personally), take a look at https://stackoverflow.com/questions/71201741/how-to-use-font-awesome-6-icons or https://fontawesome.com/docs/web/setup/get-started or https://cdn.fontawesome.com.

Thank you, that worked like a charm! Appreciate the help! I also noticed you may want to update the readme to include the new syntax for bootstrap icons "fa-brands fa-".

[willfaught]

Thanks! It'll be corrected in the next push to master. :)

[willfaught]

This seems to be resolved, so closing.