Use flag for language selector icon (#2062)

privacyguides · Mar 1, 2023 · e336699 · e336699
1 parent aaec10b
commit e336699
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/config/mkdocs.common.yml b/config/mkdocs.common.yml
@@ -16,15 +16,19 @@ extra:
     - name: English
       link: /en/
       lang: en
+      icon: https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f1fa-1f1f8.svg
     - name: Français
       link: /fr/
       lang: fr
+      icon: https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f1eb-1f1f7.svg
     - name: עִברִית
       link: /he/
       lang: he
+      icon: https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f1ee-1f1f1.svg
     - name: Nederlands
       link: /nl/
       lang: nl
+      icon: https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f1f3-1f1f1.svg
 
 repo_url: https://github.com/privacyguides/privacyguides.org
 repo_name: ""

diff --git a/theme/assets/stylesheets/extra.css b/theme/assets/stylesheets/extra.css
@@ -325,6 +325,18 @@ details[class="downloads annotate"] > p .md-annotation span span::before {
     width: 1rem;
 }
 
+/* override language selector */
+.md-select button img.twemoji {
+    height: 1rem;
+    vertical-align: middle;
+}
+
+.md-select__link img.twemoji {
+    height: 1rem;
+    vertical-align: text-bottom;
+    margin-right: 1%;
+}
+
 /* Custom header + nav */
 .md-header >*, .md-tabs {
     background: none;   

diff --git a/theme/partials/header.html b/theme/partials/header.html
@@ -44,15 +44,19 @@
         {% if config.extra.alternate %}
         <div class="md-header__option">
             <div class="md-select">
-            {% set icon = config.theme.icon.alternate or "material/translate" %}
-            <button class="md-header__button md-icon" aria-label="{{ lang.t('select.language') }}">
-                {% include ".icons/" ~ icon ~ ".svg" %}
-            </button>
+            {% for alt in config.extra.alternate %}
+                {% if alt.lang == config.theme.language %}
+                    <button class="md-header__button md-icon" aria-label="{{ lang.t('select.language') }}">
+                        <img alt="{{ config.theme.language }}" class="twemoji" src="{{ alt.icon }}">
+                    </button>
+                {% endif %}
+            {% endfor %}
             <div class="md-select__inner">
                 <ul class="md-select__list">
                 {% for alt in config.extra.alternate %}
                     <li class="md-select__item">
                     <a href="{{ alt.link | url }}" hreflang="{{ alt.lang }}" class="md-select__link">
+                        <img alt="{{ config.theme.language }}" class="twemoji" src="{{ alt.icon }}">
                         {{ alt.name }}
                     </a>
                     </li>