Skip to content

Commit 74dcf0d

Browse files
sbryngelsonsbryngelson
committed
Replace Font Awesome and Academicons webfonts with an inline SVG sprite
The site drew 14 distinct glyphs and paid ~347 KB across two third-party origins for them: Font Awesome's 89 KB stylesheet plus fa-solid-900 (127 KB), fa-brands-400 (105 KB) and the v4 compatibility shim (5 KB), then Academicons' stylesheet and webfont on top. All 14 are single-path icons. Extracted their viewBox and path data (18.6 KB total, roughly half the raw files, which for Academicons were mostly Inkscape and RDF metadata) into one <symbol> sprite emitted once per page by the layouts. Icons are referenced through _includes/icon.html, so templates read {% include icon.html name="github" %} rather than carrying SVG blobs. A sprite matters here because icons sit inside {% for member in ... %} loops on the team and home pages; inlining full SVGs would repeat multi-KB paths per member. Each <use> reference is ~40 bytes instead. Net: +8.6 KB gzipped per page, -347 KB and two origins. Verified all 112 icon references resolve to defined symbols and the count is unchanged from the webfont markup. Attribution is retained in the sprite header as the licences require: Font Awesome Free 6.0.0 icons are CC BY 4.0, Academicons 1.9.6 SIL OFL 1.1. fill: currentColor reproduces how the icon fonts inherited color, so the existing hover rules carry over unchanged (a .fa-2x/.ai-2x -> a .icon-2x). Also drops a commented-out Font Awesome 5 link left in headpear.html.
1 parent 0ab2729 commit 74dcf0d

13 files changed

Lines changed: 105 additions & 32 deletions

File tree

‎_config.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ coordinates: >
2626
# Atlanta, GA 30332
2727

2828
information: >
29-
<a href="mailto:shb@gatech.edu" target="_blank" rel="noopener noreferrer"><i class="fa fa-envelope fa-1x"></i> Email Spencer</a> <br/>
30-
<a href="/vacancies.html"><i class="fa fa-users fa-1x"></i> Explore openings</a> <br/>
31-
<a href="https://github.com/sbryngelson/academic-website-template" target="_blank" rel="noopener noreferrer"><i class="fab fa-github fa-1x"></i> Site template</a>
29+
<a href="mailto:shb@gatech.edu" target="_blank" rel="noopener noreferrer"><svg class="icon" aria-hidden="true" focusable="false"><use href="#i-envelope"/></svg> Email Spencer</a> <br/>
30+
<a href="/vacancies.html"><svg class="icon" aria-hidden="true" focusable="false"><use href="#i-users"/></svg> Explore openings</a> <br/>
31+
<a href="https://github.com/sbryngelson/academic-website-template" target="_blank" rel="noopener noreferrer"><svg class="icon" aria-hidden="true" focusable="false"><use href="#i-github"/></svg> Site template</a>
3232
3333
3434

‎_includes/footer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h5>Information</h5>
2424
</div>
2525

2626
<button id="scroll-top-btn" class="scroll-top-btn" aria-label="Back to top">
27-
<i class="fas fa-chevron-up"></i>
27+
{% include icon.html name="chevron-up" %}
2828
</button>
2929

3030
<script src="{{ "/assets/javascript/bootstrap/bootstrap.bundle.min.js" | relative_url }}"></script>

‎_includes/head.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
1111
<link rel="shortcut icon" type ="image/x-icon" href="{{ site.baseurl }}/favicon.ico">
1212
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }} RSS Feed" href="{{ site.baseurl }}/feed.xml">
13-
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
14-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
1513

1614
<link rel="preconnect" href="https://player.vimeo.com">
1715
<link rel="preconnect" href="https://i.vimeocdn.com">

‎_includes/headpear.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,6 @@
88
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
99
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
1010
<link rel="shortcut icon" type ="image/x-icon" href="{{ site.baseurl }}/favicon.ico">
11-
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> -->
12-
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css"> -->
13-
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> -->
14-
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
15-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
1611

1712
<link rel="preconnect" href="https://player.vimeo.com">
1813
<link rel="preconnect" href="https://i.vimeocdn.com">

‎_includes/icon.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<svg class="icon{% if include.class %} {{ include.class }}{% endif %}" aria-hidden="true" focusable="false"><use href="#i-{{ include.name }}"/></svg>

‎_includes/icons.html‎

Lines changed: 43 additions & 0 deletions
Large diffs are not rendered by default.

‎_layouts/default.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55

66
<body>
77

8+
{% include icons.html %}
9+
10+
811
<a href="#main-content" class="skip-to-content">Skip to main content</a>
912

1013
{% include header.html %}

‎_layouts/nonav.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55

66
<body>
77

8+
{% include icons.html %}
9+
10+
811
<div class="container-fluid">
912
<div class="row">
1013
{{ content }}

‎_pages/home.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ In August 2025 we ran the <a href='https://arxiv.org/abs/2505.07392' target='_bl
3939
<h5>{{ member.name }}</h5>
4040
<h6>{{ member.info }}</h6>
4141
<div style="margin-bottom:5px">
42-
{% if member.gt %}<a href="{{ member.gt }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s Georgia Tech profile"><i class="ai ai-archive-square ai-2x"></i></a> {% endif %}
43-
{% if member.email %}<a href="mailto:{{ member.email }}" target="_blank" rel="noopener noreferrer" aria-label="Email {{ member.name }}"><i class="fa fa-envelope-square fa-2x"></i></a> {% endif %}
44-
{% if member.cv %} <a href="{{ site.baseurl }}/{{ member.cv }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s CV"><i class="ai ai-cv-square ai-2x"></i></a> {% endif %}
45-
{% if member.scholar %} <a href="{{ member.scholar }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s Google Scholar profile"><i class="ai ai-google-scholar-square ai-2x"></i></a> {% endif %}
46-
{% if member.github %} <a href="{{ member.github }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s GitHub profile"><i class="fab fa-github-square fa-2x"></i></a> {% endif %}
47-
{% if member.researchgate %} <a href="{{ member.researchgate }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s ResearchGate profile"><i class="ai ai-researchgate-square ai-2x"></i></a> {% endif %}
42+
{% if member.gt %}<a href="{{ member.gt }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s Georgia Tech profile">{% include icon.html name="archive-square" class="icon-2x" %}</a> {% endif %}
43+
{% if member.email %}<a href="mailto:{{ member.email }}" target="_blank" rel="noopener noreferrer" aria-label="Email {{ member.name }}">{% include icon.html name="envelope-square" class="icon-2x" %}</a> {% endif %}
44+
{% if member.cv %} <a href="{{ site.baseurl }}/{{ member.cv }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s CV">{% include icon.html name="cv-square" class="icon-2x" %}</a> {% endif %}
45+
{% if member.scholar %} <a href="{{ member.scholar }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s Google Scholar profile">{% include icon.html name="google-scholar-square" class="icon-2x" %}</a> {% endif %}
46+
{% if member.github %} <a href="{{ member.github }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s GitHub profile">{% include icon.html name="github-square" class="icon-2x" %}</a> {% endif %}
47+
{% if member.researchgate %} <a href="{{ member.researchgate }}" target="_blank" rel="noopener noreferrer" aria-label="View {{ member.name }}'s ResearchGate profile">{% include icon.html name="researchgate-square" class="icon-2x" %}</a> {% endif %}
4848
</div>
4949
</center>
5050
</div>
@@ -86,8 +86,8 @@ Visit the <a href="https://mflowcode.github.io/" target="_blank" rel="noopener n
8686

8787
<div style="text-align: center; margin: 20px 0;" markdown="0">
8888
<a href="https://mflowcode.github.io/" target="_blank" rel="noopener noreferrer" class="btn btn-primary">MFC Website</a>
89-
<a href="https://github.com/MFlowCode/MFC" target="_blank" rel="noopener noreferrer" class="btn btn-primary"><i class="fab fa-github"></i> GitHub</a>
90-
<a href="https://join.slack.com/t/mflowcode/shared_invite/zt-y75wibvk-g~zztjknjYkK1hFgCuJxVw" target="_blank" rel="noopener noreferrer" class="btn btn-primary"><i class="fab fa-slack"></i> Slack</a>
89+
<a href="https://github.com/MFlowCode/MFC" target="_blank" rel="noopener noreferrer" class="btn btn-primary">{% include icon.html name="github" %} GitHub</a>
90+
<a href="https://join.slack.com/t/mflowcode/shared_invite/zt-y75wibvk-g~zztjknjYkK1hFgCuJxVw" target="_blank" rel="noopener noreferrer" class="btn btn-primary">{% include icon.html name="slack" %} Slack</a>
9191
{% include mfc_cite_dropdown.html id="Home" external=true %}
9292
</div>
9393

‎_pages/research.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ Our group builds numerical methods, computational models, and open-source softwa
2323
{% endfor %}
2424
</ul>
2525
<div class="research-footer" markdown="0">
26-
{% if theme.papers %}<span class="research-pubs"><i class="fas fa-file-alt"></i> {% for key in theme.papers %}<a href="{{ site.baseurl }}/papers/#{{ key }}">{{ key }}</a>{% unless forloop.last %} · {% endunless %}{% endfor %}</span>{% endif %}
27-
{% if theme.links %}<div class="research-links">{% for link in theme.links %}<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" class="research-link"><i class="fab fa-github"></i> {{ link.text }}</a>{% endfor %}</div>{% endif %}
26+
{% if theme.papers %}<span class="research-pubs">{% include icon.html name="file-lines" %} {% for key in theme.papers %}<a href="{{ site.baseurl }}/papers/#{{ key }}">{{ key }}</a>{% unless forloop.last %} · {% endunless %}{% endfor %}</span>{% endif %}
27+
{% if theme.links %}<div class="research-links">{% for link in theme.links %}<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" class="research-link">{% include icon.html name="github" %} {{ link.text }}</a>{% endfor %}</div>{% endif %}
2828
</div>
2929
</div>
3030
</div>

0 commit comments

Comments
 (0)