Custom icon in params.social with Coder theme

Using Themes
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>
~
1 Like