Custom icons #30, #31

3 files changed, 68 insertions, 30 deletions

diff --git a/layouts/partials/sections/v3/home.html b/layouts/partials/sections/v3/home.html
index b862fdc..6df7386 100644
--- a/layouts/partials/sections/v3/home.html
+++ b/layouts/partials/sections/v3/home.html
@@ -20,41 +20,65 @@
         </div>
         <div class="row social pt-4" data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" data-aos-duration="900"
           data-aos-once="true">
-          {{ if .Site.Params.github }}
-          <a href="{{ .Site.Params.github }}" class="social-icon">
-            <i class="fab fa-lg fa-github"></i>
-          </a>
-          <span class="px-1"></span>
-          {{ end }}
+          <div class="col-md-12">
+            {{ if .Site.Params.github }}
+            <a href="{{ .Site.Params.github }}" class="social-icon">
+              <i class="fab fa-lg fa-github"></i>
+              &#8203;
+            </a>
+            <span class="px-1"></span>
+            {{ end }}
 
-          {{ if .Site.Params.gitlab }}
-          <a href="{{ .Site.Params.gitlab }}" class="social-icon">
-            <i class="fab fa-lg fa-gitlab"></i>
-          </a>
-          <span class="px-1"></span>
-          {{ end }}
+            {{ if .Site.Params.gitlab }}
+            <a href="{{ .Site.Params.gitlab }}" class="social-icon">
+              <i class="fab fa-lg fa-gitlab"></i>
+              &#8203;
+            </a>
+            <span class="px-1"></span>
+            {{ end }}
 
-          {{ if .Site.Params.twitter }}
-          <a href="{{ .Site.Params.twitter }}" class="social-icon">
-            <i class="fab fa-lg fa-twitter"></i>
-          </a>
-          <span class="px-1"></span>
-          {{ end }}
+            {{ if .Site.Params.twitter }}
+            <a href="{{ .Site.Params.twitter }}" class="social-icon">
+              <i class="fab fa-lg fa-twitter"></i>
+              &#8203;
+            </a>
+            <span class="px-1"></span>
+            {{ end }}
 
-          {{ if .Site.Params.linkedin }}
-          <a href="{{ .Site.Params.linkedin }}" class="social-icon">
-            <i class="fab fa-lg fa-linkedin"></i>
-          </a>
-          <span class="px-1"></span>
-          {{ end }}
+            {{ if .Site.Params.linkedin }}
+            <a href="{{ .Site.Params.linkedin }}" class="social-icon">
+              <i class="fab fa-lg fa-linkedin"></i>
+              &#8203;
+            </a>
+            <span class="px-1"></span>
+            {{ end }}
 
-          {{ if .Site.Params.facebook }}
-          <a href="{{ .Site.Params.facebook }}" class="social-icon">
-            <i class="fab fa-lg fa-facebook"></i>
-          </a>
-          {{ end }}
+            {{ if .Site.Params.facebook }}
+            <a href="{{ .Site.Params.facebook }}" class="social-icon">
+              <i class="fab fa-lg fa-facebook"></i>
+              &#8203;
+            </a>
+            <span class="px-1"></span>
+            {{ end }}
 
+            <!-- customSocialLinks -->
+            {{ range .Site.Params.customSocialLinks }}
+            {{ if .fontAwesomeIconName }}
+            <a href="{{ .url }}" class="social-icon">
+              <i class="fa-lg {{ .fontAwesomeIconName }}"></i>
+              &#8203;
+            </a>
+            {{ else }}
+            <a href="{{ .url }}" class="social-icon">
+              <img class="fab fa-lg" src="{{ .imageURL }}" alt="{{ .name }}" width="4%" />
+              &#8203;
+            </a>
+            {{ end }}
+            <span class="px-1"></span>
+            {{ end }}
+          </div>
         </div>
+
         <div class="pt-4 btn-intro">
           <a href="#about" class="btn-know btn btn-outline-info" data-aos="zoom-in" data-aos-offset="50"
             data-aos-delay="50" data-aos-duration="900" data-aos-once="true">
@@ -72,4 +96,4 @@
 
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/website/config.yaml b/website/config.yaml
index a65e70c..9ffdf8f 100644
--- a/website/config.yaml
+++ b/website/config.yaml
@@ -42,6 +42,13 @@ params:
   instagram: "https://instagram.com/"
   facebook: "https://facebook.com"
 
+  #Custom social links
+  # customSocialLinks:
+  #   - imageURL: "https://hugo-profile.netlify.app/images/fav.png"
+  #     url: "https://gohugo.com"
+  #   - fontAwesomeIconName: "fa fa-envelope"
+  #     url: "https://gmail.com"
+  
   # About
   disable_about: false
   descripe_l1_person: "Hi, I'm Profile, a passionate web developer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly."
diff --git a/website/v3.yaml b/website/v3.yaml
index 731002d..87b30aa 100644
--- a/website/v3.yaml
+++ b/website/v3.yaml
@@ -42,6 +42,13 @@ params:
   instagram: "https://instagram.com/"
   facebook: "https://facebook.com"
 
+  # Custom social links
+  customSocialLinks:
+    - imageURL: "https://hugo-profile.netlify.app/images/fav.png"
+      url: "https://gohugo.com"
+    - fontAwesomeIconName: "fa fa-envelope"
+      url: "https://gmail.com"
+
   # About
   disable_about: false
   descripe_l1_person: "Hi, I'm Profile, a passionate web developer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly."