icons: use fixed width to ease layout #812

McShelby · Mar 18, 2024 · 195de35 · 195de35
1 parent 69c7136
commit 195de35
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 45 deletions.
diff --git a/exampleSite/config/_default/hugo.toml b/exampleSite/config/_default/hugo.toml
@@ -84,31 +84,31 @@ title = "Hugo Relearn Theme"
     # Use case https://gohugo.io/content-management/multilingual/#translation-by-content-directory
     #contentDir = "content/en"
     [languages.en.params]
-      landingPageName = "<i class='fas fa-home'></i> Home"
+      landingPageName = "<i class='fa-fw fas fa-home'></i> Home"
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
+    name = "<i class='fa-fw fab fa-github'></i> GitHub repo"
     identifier = "ds"
     url = "https://github.com/McShelby/hugo-theme-relearn"
     weight = 10
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-camera'></i> Showcases"
+    name = "<i class='fa-fw fas fa-camera'></i> Showcases"
     pageRef = "showcase/"
     weight = 20
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-bullhorn'></i> Credits"
+    name = "<i class='fa-fw fas fa-bullhorn'></i> Credits"
     pageRef = "more/credits/"
     weight = 30
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-tags'></i> Tags"
+    name = "<i class='fa-fw fas fa-tags'></i> Tags"
     pageRef = "tags/"
     weight = 40
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-layer-group'></i> Categories"
+    name = "<i class='fa-fw fas fa-layer-group'></i> Categories"
     pageRef = "categories/"
     weight = 50
 
@@ -128,31 +128,31 @@ title = "Hugo Relearn Theme"
     # Use case https://gohugo.io/content-management/multilingual/#translation-by-content-directory
     #contentDir = "content/pir"
     [languages.pir.params]
-      landingPageName = "<i class='fas fa-home'></i> Arrr! Home"
+      landingPageName = "<i class='fa-fw fas home'></i> Arrr! Home"
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
+    name = "<i class='fa-fw fab fa-github'></i> GitHub repo"
     identifier = "ds"
     url = "https://github.com/McShelby/hugo-theme-relearn"
     weight = 10
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-camera'></i> Showcases"
+    name = "<i class='fa-fw fas fa-camera'></i> Showcases"
     pageRef = "showcase/"
     weight = 20
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-bullhorn'></i> Crrredits"
+    name = "<i class='fa-fw fas fa-bullhorn'></i> Crrredits"
     pageRef = "more/credits/"
     weight = 30
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-tags'></i> Arrr! Tags"
+    name = "<i class='fa-fw fas fa-tags'></i> Arrr! Tags"
     pageRef = "tags/"
     weight = 40
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-layer-group'></i> Categorrries"
+    name = "<i class='fa-fw fas fa-layer-group'></i> Categorrries"
     pageRef = "categories/"
     weight = 50
 

diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md
@@ -118,16 +118,16 @@ appearance, you will have to configure the `landingPageName` for the defined lan
 [languages]
 [languages.en]
 [languages.en.params]
-landingPageName = "<i class='fas fa-home'></i> Home"
+landingPageName = "<i class='fa-fw fas fa-home'></i> Home"
 [languages.pir]
 [languages.pir.params]
-landingPageName = "<i class='fas fa-home'></i> Arrr! Homme"
+landingPageName = "<i class='fa-fw fas fa-home'></i> Arrr! Homme"
 {{< /multiconfig >}}
 
 If this option is not configured for a specific language, they will get their default values:
 
 {{< multiconfig >}}
-landingPageName = "<i class='fas fa-home'></i> Home"
+landingPageName = "<i class='fa-fw fas fa-home'></i> Home"
 {{< /multiconfig >}}
 
 The home button is going to look like this:

diff --git a/exampleSite/content/cont/menushortcuts.en.md b/exampleSite/content/cont/menushortcuts.en.md
@@ -13,29 +13,29 @@ Example from the current website:
 
 {{< multiconfig file=hugo >}}
 [[menu.shortcuts]]
-name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
+name = "<i class='fa-fw fab fa-github'></i> GitHub repo"
 identifier = "ds"
 url = "https://github.com/McShelby/hugo-theme-relearn"
 weight = 10
 
 [[menu.shortcuts]]
-name = "<i class='fas fa-fw fa-camera'></i> Showcases"
+name = "<i class='fa-fw fas fa-camera'></i> Showcases"
 url = "showcase/"
 weight = 11
 
 [[menu.shortcuts]]
-name = "<i class='fas fa-fw fa-bookmark'></i> Hugo Documentation"
+name = "<i class='fa-fw fas fa-bookmark'></i> Hugo Documentation"
 identifier = "hugodoc"
 url = "https://gohugo.io/"
 weight = 20
 
 [[menu.shortcuts]]
-name = "<i class='fas fa-fw fa-bullhorn'></i> Credits"
+name = "<i class='fa-fw fas fa-bullhorn'></i> Credits"
 url = "more/credits/"
 weight = 30
 
 [[menu.shortcuts]]
-name = "<i class='fas fa-fw fa-tags'></i> Tags"
+name = "<i class='fa-fw fas fa-tags'></i> Tags"
 url = "tags/"
 weight = 40
 {{< /multiconfig >}}
@@ -65,32 +65,32 @@ Example from the current website:
     weight = 1
     languageName = "English"
     [languages.en.params]
-      landingPageName = "<i class='fas fa-home'></i> Home"
+      landingPageName = "<i class='fa-fw fas fa-home'></i> Home"
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
+    name = "<i class='fa-fw fab fa-github'></i> GitHub repo"
     identifier = "ds"
     url = "https://github.com/McShelby/hugo-theme-relearn"
     weight = 10
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-camera'></i> Showcases"
+    name = "<i class='fa-fw fas fa-camera'></i> Showcases"
     pageRef = "showcase/"
     weight = 11
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-bookmark'></i> Hugo Documentation"
+    name = "<i class='fa-fw fas fa-bookmark'></i> Hugo Documentation"
     identifier = "hugodoc"
     url = "https://gohugo.io/"
     weight = 20
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-bullhorn'></i> Credits"
+    name = "<i class='fa-fw fas fa-bullhorn'></i> Credits"
     pageRef = "more/credits/"
     weight = 30
 
   [[languages.en.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-tags'></i> Tags"
+    name = "<i class='fa-fw fas fa-tags'></i> Tags"
     pageRef = "tags/"
     weight = 40
 
@@ -99,32 +99,32 @@ Example from the current website:
     weight = 1
     languageName = "Arrr! Pirrrates"
     [languages.pir.params]
-      landingPageName = "<i class='fas fa-home'></i> Arrr! Home"
+      landingPageName = "<i class='fa-fw fas fa-home'></i> Arrr! Home"
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
+    name = "<i class='fa-fw fab fa-github'></i> GitHub repo"
     identifier = "ds"
     url = "https://github.com/McShelby/hugo-theme-relearn"
     weight = 10
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-camera'></i> Showcases"
+    name = "<i class='fa-fw fas fa-camera'></i> Showcases"
     pageRef = "showcase/"
     weight = 11
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-bookmark'></i> Cap'n Hugo Documentat'n"
+    name = "<i class='fa-fw fas fa-bookmark'></i> Cap'n Hugo Documentat'n"
     identifier = "hugodoc"
     url = "https://gohugo.io/"
     weight = 20
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-bullhorn'></i> Crrredits"
+    name = "<i class='fa-fw fas fa-bullhorn'></i> Crrredits"
     pageRef = "more/credits/"
     weight = 30
 
   [[languages.pir.menu.shortcuts]]
-    name = "<i class='fas fa-fw fa-tags'></i> Arrr! Tags"
+    name = "<i class='fa-fw fas fa-tags'></i> Arrr! Tags"
     pageRef = "tags/"
     weight = 40
 {{< /multiconfig >}}

diff --git a/exampleSite/content/cont/taxonomy.en.md b/exampleSite/content/cont/taxonomy.en.md
@@ -31,11 +31,11 @@ In the `hugo.toml`  file you can add a shortcut to display all the tags and cate
 
 {{< multiconfig file=hugo >}}
 [[menu.shortcuts]]
-name = "<i class='fas fa-tags'></i> Tags"
+name = "<i class='fa-fw fas fa-tags'></i> Tags"
 url = "/tags"
 
 [[menu.shortcuts]]
-name = "<i class='fas fa-layer-group'></i> Categories"
+name = "<i class='fa-fw fas fa-layer-group'></i> Categories"
 url = "/categories"
 {{< /multiconfig >}}
 

diff --git a/layouts/partials/content-footer.html b/layouts/partials/content-footer.html
@@ -23,9 +23,9 @@
   {{- end }}
 {{- end }}
 {{- if $LastModifierDisplayName }}
-              <i class='fas fa-user'></i> {{ with $LastModifierEmail }}<a href="mailto:{{ . }}">{{ end }}{{ $LastModifierDisplayName }}{{ with $LastModifierEmail }}</a>{{ end }}
+              <i class='fa-fw fas fa-user'></i> {{ with $LastModifierEmail }}<a href="mailto:{{ . }}">{{ end }}{{ $LastModifierDisplayName }}{{ with $LastModifierEmail }}</a>{{ end }}
   {{- with $Date }}
-              <i class='fas fa-calendar'></i> {{ . }}
+              <i class='fa-fw fas fa-calendar'></i> {{ . }}
   {{- end }}
 {{- end }}
 {{- partial "term-list.html" (dict

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
@@ -23,7 +23,7 @@
           {{- warnf "%q: UNSUPPORTED usage of 'landingPageURL' config parameter found, remove it and optionally overwrite the `logo.html` partial to provide a link if it should not point to the project's home page; see https://mcshelby.github.io/hugo-theme-relearn/basics/migration#420" .File.Filename }}
         {{- end }}
         <ul>
-          <li><a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .Site.Home) }}">{{ .Site.Params.landingPageName | default `<i class="fas fa-home"></i> Home` | safeHTML }}</a></li>
+          <li><a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .Site.Home) }}">{{ .Site.Params.landingPageName | default `<i class="fa-fw fas fa-home"></i> Home` | safeHTML }}</a></li>
         </ul>
       {{- end }}
         <hr class="padding">
@@ -69,7 +69,7 @@
             <ul>
               <li id="R-select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
                 <div class="padding menu-control">
-                  <i class="fas fa-language fa-fw"></i>
+                  <i class="fa-fw fas fa-language"></i>
                   <span>&nbsp;</span>
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-language">{{ T "Language" }}</label>
@@ -86,7 +86,7 @@
               </li>
               <li id="R-select-variant-container" class="footerVariantSwitch{{if $showvariantswitch}} showVariantSwitch{{end}}">
                 <div class="padding menu-control">
-                  <i class="fas fa-paint-brush fa-fw"></i>
+                  <i class="fa-fw fas fa-paint-brush"></i>
                   <span>&nbsp;</span>
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">{{ T "Theme" }}</label>
@@ -105,7 +105,7 @@
               </li>
               <li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}">
                 <div class="padding menu-control">
-                  <i class="fas fa-history fa-fw"></i>
+                  <i class="fa-fw fas fa-history"></i>
                   <span>&nbsp;</span>
                   <div class="control-style">
                     <button onclick="clearHistory();">{{ T "Clear-History" }}</button>
@@ -151,9 +151,9 @@
             {{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
             {{- $pageHash := md5 .Page }}
             {{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }}
-          <li data-nav-id="{{ $url }}" class="{{if $isActive }}active {{end}}{{if (or $isSelf $isAncestor) }}parent {{end}}{{if $currentAlwaysopen}}alwaysopen{{end}}">{{ if $isCollapsible }}<input type="checkbox" id="R-section-{{ $pageHash }}" aria-controls="R-subsections-{{ $pageHash }}"{{ if $isOpen }} checked{{ end }}><label for="R-section-{{ $pageHash }}"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">{{ T "Submenu" $title }}</span></label>{{ end }}{{ if $url }}<a class="padding" href="{{ $url }}">{{ else }}<span class="padding">{{ end }}
+          <li data-nav-id="{{ $url }}" class="{{if $isActive }}active {{end}}{{if (or $isSelf $isAncestor) }}parent {{end}}{{if $currentAlwaysopen}}alwaysopen{{end}}">{{ if $isCollapsible }}<input type="checkbox" id="R-section-{{ $pageHash }}" aria-controls="R-subsections-{{ $pageHash }}"{{ if $isOpen }} checked{{ end }}><label for="R-section-{{ $pageHash }}"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">{{ T "Submenu" $title }}</span></label>{{ end }}{{ if $url }}<a class="padding" href="{{ $url }}">{{ else }}<span class="padding">{{ end }}
             {{- partial "menu-pre.html" . }}{{ $title }}{{ partial "menu-post.html" . }}
-            {{- if $url }}{{ if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a>{{ else }}</span>{{ end }}<ul id="R-subsections-{{ $pageHash }}" class="morespace collapsible-menu">
+            {{- if $url }}{{ if $showvisitedlinks }}<i class="fa-fw fas fa-check read-icon"></i>{{ end }}</a>{{ else }}</span>{{ end }}<ul id="R-subsections-{{ $pageHash }}" class="morespace collapsible-menu">
             {{- $defaultAlwaysopen := .Site.Params.alwaysopen | default true }}
             {{- range $pages }}
               {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen }}
@@ -163,7 +163,7 @@
             {{- $url := partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}
           <li data-nav-id="{{ $url }}" class="{{if $isActive }}active{{end}}">{{ if $url }}<a class="padding" href="{{ $url }}">{{ else }}<span class="padding">{{ end }}
               {{- partial "menu-pre.html" . }}{{ $title }}{{ partial "menu-post.html" . }}
-              {{- if $url }}{{ if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a>{{ else }}</span>{{ end }}</li>
+              {{- if $url }}{{ if $showvisitedlinks }}<i class="fa-fw fas fa-check read-icon"></i>{{ end }}</a>{{ else }}</span>{{ end }}</li>
           {{- end }}
         {{- end }}
       {{- end }}

diff --git a/layouts/partials/shortcodes/expand.html b/layouts/partials/shortcodes/expand.html
@@ -15,8 +15,8 @@
 <div class="expand">
     <input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}" {{ if $expanded }} checked{{ end }}>
     <label class="expand-label" for="R-expand-{{ $id }}" >
-        <i class="fas fa-chevron-down"></i>
-        <i class="fas fa-chevron-right"></i>
+        <i class="fa-fw fas fa-chevron-down"></i>
+        <i class="fa-fw fas fa-chevron-right"></i>
         {{ $title | .RenderString }}
     </label>
     <div id="R-expandcontent-{{ $id }}" class="expand-content">