Custom icon in params.social with Coder theme

Using Themes
1

Hi,

I’m trying to use a custom icon for Letterboxd with the Coder theme under a [params.social] in config.toml. I can’t seem to wrap my head around exactly how I would go about this. I’ve used IcoMoon to create the font and css files from this svg but not sure where to place the files, how to reference them and get this to work (if indeed this would be the correct method).
If you need any more info let me know. Any help with getting this to work would be much appreciated. Cheers :slight_smile:

2

Creating and loading fonts and CSS is an awful lot of work to add a social icon. Recommendation:

Step 1

mkdir -p layouts/partials/ static/images/social/
cp themes/hugo-coder/layouts/partials/home.html layouts/partials/

Step 2

Download the SVG to static/images/social/letterboxd.svg

Step 3

Add this to your site configuration:

[[params.social]]
  name = "Letteboxd"
  image = "/images/social/letterboxd.svg"
  weight = 4
  url = "https://letterboxd.com/me/"

Step 4

Modify layouts/partials/home.html

diff --git a/layouts/partials/home.html b/layouts/partials/home.html
index ff640ddba..548eb8ff8 100644
--- a/layouts/partials/home.html
+++ b/layouts/partials/home.html
@@ -17,7 +17,14 @@ <h2>{{ .Site.Params.info }}</h2>
     {{ with .Site.Params.social }}
     <ul>
       {{ range sort . "weight" }}
-        {{ if .icon }}
+        {{ if .image }}
+        <li>
+          <a href="{{ .url | safeURL }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
+            <img src="{{ .image }}" height="26" width="26" alt="Letterboxd icon">
+          </a>
+        </li>
+
+        {{ else if .icon }}
           <li>
             <a href="{{ .url | safeURL }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
               <i class="{{ .icon }}" aria-hidden="true"></i>
~