home > community: use css rg / gh icon & as img tag for testing #4 #8 …

…, customstyles.css: changes for gh / rg-icon-inline
FabianBartl · Sep 21, 2022 · dc7d02e · dc7d02e
1 parent 78dadc7
commit dc7d02e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/css/customstyles.css b/css/customstyles.css
@@ -1222,6 +1222,16 @@ abbr[title]:after { content: "\f129"; } /* info */
     content: "\f0c6"; /* paperclip */
 }
 
+/* GitHub / ResearchGate Icon inline with text */
+.gh-icon-inline,
+.rg-icon-inline {
+    border-radius: 100%;
+    height: 1em;
+    vertical-align: sub;
+}
+.gh-icon-inline { background-image: url("../images/icons/GitHub_512px.png"); }
+.rg-icon-inline { background-image: url("../images/icons/ResearchGate_256px.png"); }
+
 /* inline list with font awesome separator */
 .ul-inline > .li-inline:not(:first-of-type):before {
     content: "\f111"; /* circle */

diff --git a/index.md b/index.md
@@ -86,13 +86,15 @@ of material scientists, geologists and mathematicians.
                     <li>
                         {% capture ref_content %}
                             GitHub Repository
-                            <i class="fa fa-github"></i>
+                            <img src="{{ "images/icons/GitHub_512px.png" }}" style="border-radius: 100%; height: 1em; vertical-align: sub;">
+                            <i class="gh-icon-inline"></i>
                         {% endcapture %}
                         {% include reference.html link="https://github.com/mtex-toolbox/mtex" content=ref_content no_icon=true %}
                         and
                         {% capture ref_content %}
                             ResearchGate Project
-                            <img src="{{ "images/icons/ResearchGate_256px.png" }}" height="15px" style="filter: grayscale(1); border-radius: 100%;">
+                            <img src="{{ "images/icons/ResearchGate_256px.png" }}" style="border-radius: 100%; height: 1em; vertical-align: sub;">
+                            <i class="rg-icon-inline"></i>
                         {% endcapture %}
                         {% include reference.html link="https://www.researchgate.net/project/MTEX-free-crystallographic-texture-analysis-software" content=ref_content no_icon=true %}
                     </li>