Refactor instagram glyph

maintenance/maintenance.html

@@ -126,7 +126,7 @@
                 <h5 class="tw-h5-heading">More about us</h5>
                 <ul class="d-flex">
                   <li class="mr-2"><a class="tw-twitter-glyph d-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">Twitter</span></a></li>
-                  <li class="mr-2"><a class="instagram-glyph small d-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">Instagram</span></a></li>
+                  <li class="mr-2"><a class="tw-instagram-glyph d-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">Instagram</span></a></li>
                   <li class="mr-2"><a class="github-glyph small d-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">Github</span></a></li>
                 </ul>
               </div>

network-api/networkapi/templates/partials/footer.html

@@ -40,7 +40,7 @@
               <ul class="tw-p-0 tw-ml-0 tw-flex tw-list-none">
                 {% block social_links %}
                 <li class="tw-mr-2"><a class="tw-twitter-glyph tw-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">{% trans "Twitter" %}</span></a></li>
-                <li class="tw-mr-2"><a class="instagram-glyph small tw-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">{% trans "Instagram" %}</span></a></li>
+                <li class="tw-mr-2"><a class="tw-instagram-glyph tw-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">{% trans "Instagram" %}</span></a></li>
                 <li class="tw-mr-2"><a class="github-glyph small tw-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">{% trans "GitHub" %}</span></a></li>
                 <li class="tw-mr-2"><a class="youtube-glyph tw-inline-block" href="https://www.youtube.com/user/Mozilla"><span class="sr-only">{% trans "Youtube" %}</span></a></li>
                 {% endblock %}

network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html

@@ -125,7 +125,7 @@
                 <h5 class="tw-h5-heading">More about us</h5>
                 <ul class="d-flex">
                   <li class="mr-2"><a class="tw-twitter-glyph d-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">Twitter</span></a></li>
-                  <li class="mr-2"><a class="instagram-glyph small d-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">Instagram</span></a></li>
+                  <li class="mr-2"><a class="tw-instagram-glyph d-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">Instagram</span></a></li>
                   <li class="mr-2"><a class="github-glyph small d-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">Github</span></a></li>
                 </ul>
               </div>

tailwind-plugins/glyph.js

@@ -84,6 +84,10 @@ module.exports = [
           "& .instagram-glyph": {
             ...glyph("instagram-dark-theme"),
             ...hoverGlyph("instagram-dark-theme-hover"),
+            "&:before": {
+              width: "16px",
+              height: "16px",
+            },
           },
           "& .medium-glyph": {
             ...glyph("medium-dark-theme"),