Skip to content

Commit dec63d3

Browse files
notriddlenotriddle
committed
Use embedded SVG instead of fonts for icons
The [downsides of icon fonts] are well-documented, and also, why ship all of the icons when it only uses 14? [downsides of icon fonts]: https://speakerdeck.com/ninjanails/death-to-icon-fonts
1 parent 39d7130 commit dec63d3

17 files changed

+105
-2753
lines changed

‎Cargo.lock

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Cargo.toml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ serde_json = "1.0"
3333
shlex = "0.1"
3434
tempfile = "3.0"
3535
toml = "0.5.1"
36+
font-awesome-as-a-crate = "0.1.2"
3637

3738
# Watch feature
3839
notify = { version = "4.0", optional = true }

‎src/renderer/html_handlebars/hbs_renderer.rs

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -207,41 +207,6 @@ impl HtmlHandlebars {
207207
write_file(destination, "ayu-highlight.css", &theme.ayu_highlight_css)?;
208208
write_file(destination, "highlight.js", &theme.highlight_js)?;
209209
write_file(destination, "clipboard.min.js", &theme.clipboard_js)?;
210-
write_file(
211-
destination,
212-
"FontAwesome/css/font-awesome.css",
213-
theme::FONT_AWESOME,
214-
)?;
215-
write_file(
216-
destination,
217-
"FontAwesome/fonts/fontawesome-webfont.eot",
218-
theme::FONT_AWESOME_EOT,
219-
)?;
220-
write_file(
221-
destination,
222-
"FontAwesome/fonts/fontawesome-webfont.svg",
223-
theme::FONT_AWESOME_SVG,
224-
)?;
225-
write_file(
226-
destination,
227-
"FontAwesome/fonts/fontawesome-webfont.ttf",
228-
theme::FONT_AWESOME_TTF,
229-
)?;
230-
write_file(
231-
destination,
232-
"FontAwesome/fonts/fontawesome-webfont.woff",
233-
theme::FONT_AWESOME_WOFF,
234-
)?;
235-
write_file(
236-
destination,
237-
"FontAwesome/fonts/fontawesome-webfont.woff2",
238-
theme::FONT_AWESOME_WOFF2,
239-
)?;
240-
write_file(
241-
destination,
242-
"FontAwesome/fonts/FontAwesome.ttf",
243-
theme::FONT_AWESOME_TTF,
244-
)?;
245210
if html_config.copy_fonts {
246211
write_file(destination, "fonts/fonts.css", theme::fonts::CSS)?;
247212
for (file_name, contents) in theme::fonts::LICENSES.iter() {
@@ -308,6 +273,7 @@ impl HtmlHandlebars {
308273
handlebars.register_helper("previous", Box::new(helpers::navigation::previous));
309274
handlebars.register_helper("next", Box::new(helpers::navigation::next));
310275
handlebars.register_helper("theme_option", Box::new(helpers::theme::theme_option));
276+
handlebars.register_helper("fa", Box::new(helpers::fontawesome::fa_helper));
311277
}
312278

313279
/// Copy across any additional CSS and JavaScript files which the book

‎src/renderer/html_handlebars/helpers/fontawesome.rs

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
use font_awesome_as_a_crate as fa;
2+
use handlebars::{Context, Handlebars, Helper, Output, RenderContext, RenderError};
3+
4+
pub fn fa_helper(
5+
h: &Helper<'_, '_>,
6+
_r: &Handlebars<'_>,
7+
_ctx: &Context,
8+
_rc: &mut RenderContext<'_, '_>,
9+
out: &mut dyn Output,
10+
) -> Result<(), RenderError> {
11+
trace!("fa_helper (handlebars helper)");
12+
13+
let type_ = h
14+
.param(0)
15+
.and_then(|v| v.value().as_str())
16+
.and_then(|v| fa::Type::from_str(v).ok())
17+
.ok_or_else(|| {
18+
RenderError::new("Param 0 with String type is required for fontawesome helper.")
19+
})?;
20+
21+
let name = h.param(1).and_then(|v| v.value().as_str()).ok_or_else(|| {
22+
RenderError::new("Param 1 with String type is required for fontawesome helper.")
23+
})?;
24+
25+
trace!("fa_helper: {} {}", type_, name);
26+
27+
let name = if name.starts_with("fa-") {
28+
&name[3..]
29+
} else {
30+
&name[..]
31+
};
32+
33+
if let Some(id) = h.param(2).and_then(|v| v.value().as_str()) {
34+
out.write(&format!("<span class=fa-svg id=\"{}\">", id))?;
35+
} else {
36+
out.write("<span class=fa-svg>")?;
37+
}
38+
out.write(
39+
fa::svg(type_, name).map_err(|_| RenderError::new(format!("Missing font {}", name)))?,
40+
)?;
41+
out.write("</span>")?;
42+
43+
Ok(())
44+
}

‎src/renderer/html_handlebars/helpers/mod.rs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
pub mod fontawesome;
12
pub mod navigation;
23
pub mod theme;
34
pub mod toc;

‎src/theme/FontAwesome/css/font-awesome.min.css

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/theme/FontAwesome/fonts/FontAwesome.otf

-132 KB
Binary file not shown.

‎src/theme/FontAwesome/fonts/fontawesome-webfont.eot

-162 KB
Binary file not shown.

‎src/theme/FontAwesome/fonts/fontawesome-webfont.svg

Lines changed: 0 additions & 2671 deletions
This file was deleted.

‎src/theme/FontAwesome/fonts/fontawesome-webfont.ttf

-162 KB
Binary file not shown.

‎src/theme/FontAwesome/fonts/fontawesome-webfont.woff

-95.7 KB
Binary file not shown.

‎src/theme/FontAwesome/fonts/fontawesome-webfont.woff2

-75.4 KB
Binary file not shown.

‎src/theme/book.js

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ function playground_text(playground) {
9292

9393
if (all_available) {
9494
play_button.classList.remove("hidden");
95+
play_button.hidden = false;
9596
} else {
9697
play_button.classList.add("hidden");
9798
}
@@ -175,25 +176,24 @@ function playground_text(playground) {
175176

176177
var buttons = document.createElement('div');
177178
buttons.className = 'buttons';
178-
buttons.innerHTML = "<button class=\"fa fa-eye\" title=\"Show hidden lines\" aria-label=\"Show hidden lines\"></button>";
179+
buttons.innerHTML = "<button title=\"Show hidden lines\" aria-label=\"Show hidden lines\"></button>";
180+
buttons.firstChild.innerHTML = document.getElementById('fa-eye').innerHTML;
179181

180182
// add expand button
181183
var pre_block = block.parentNode;
182184
pre_block.insertBefore(buttons, pre_block.firstChild);
183185

184-
pre_block.querySelector('.buttons').addEventListener('click', function (e) {
185-
if (e.target.classList.contains('fa-eye')) {
186-
e.target.classList.remove('fa-eye');
187-
e.target.classList.add('fa-eye-slash');
188-
e.target.title = 'Hide lines';
189-
e.target.setAttribute('aria-label', e.target.title);
186+
buttons.firstChild.addEventListener('click', function (e) {
187+
if (this.title === "Show hidden lines") {
188+
this.innerHTML = document.getElementById('fa-eye-slash').innerHTML;
189+
this.title = 'Hide lines';
190+
this.setAttribute('aria-label', e.target.title);
190191

191192
block.classList.remove('hide-boring');
192-
} else if (e.target.classList.contains('fa-eye-slash')) {
193-
e.target.classList.remove('fa-eye-slash');
194-
e.target.classList.add('fa-eye');
195-
e.target.title = 'Show hidden lines';
196-
e.target.setAttribute('aria-label', e.target.title);
193+
} else if (this.title === "Hide lines") {
194+
this.innerHTML = document.getElementById('fa-eye').innerHTML;
195+
this.title = 'Show hidden lines';
196+
this.setAttribute('aria-label', e.target.title);
197197

198198
block.classList.add('hide-boring');
199199
}
@@ -212,10 +212,11 @@ function playground_text(playground) {
212212
}
213213

214214
var clipButton = document.createElement('button');
215-
clipButton.className = 'fa fa-copy clip-button';
215+
clipButton.className = 'clip-button';
216216
clipButton.title = 'Copy to clipboard';
217217
clipButton.setAttribute('aria-label', clipButton.title);
218218
clipButton.innerHTML = '<i class=\"tooltiptext\"></i>';
219+
clipButton.innerHTML += document.getElementById('fa-copy').innerHTML;
219220

220221
buttons.insertBefore(clipButton, buttons.firstChild);
221222
}
@@ -233,10 +234,11 @@ function playground_text(playground) {
233234
}
234235

235236
var runCodeButton = document.createElement('button');
236-
runCodeButton.className = 'fa fa-play play-button';
237+
runCodeButton.className = 'play-button';
237238
runCodeButton.hidden = true;
238239
runCodeButton.title = 'Run this code';
239240
runCodeButton.setAttribute('aria-label', runCodeButton.title);
241+
runCodeButton.innerHTML = document.getElementById('fa-play').innerHTML;
240242

241243
buttons.insertBefore(runCodeButton, buttons.firstChild);
242244
runCodeButton.addEventListener('click', function (e) {
@@ -245,8 +247,9 @@ function playground_text(playground) {
245247

246248
if (window.playground_copyable) {
247249
var copyCodeClipboardButton = document.createElement('button');
248-
copyCodeClipboardButton.className = 'fa fa-copy clip-button';
250+
copyCodeClipboardButton.className = 'clip-button';
249251
copyCodeClipboardButton.innerHTML = '<i class="tooltiptext"></i>';
252+
copyCodeClipboardButton.innerHTML += document.getElementById('fa-copy').innerHTML;
250253
copyCodeClipboardButton.title = 'Copy to clipboard';
251254
copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);
252255

@@ -256,9 +259,10 @@ function playground_text(playground) {
256259
let code_block = pre_block.querySelector("code");
257260
if (window.ace && code_block.classList.contains("editable")) {
258261
var undoChangesButton = document.createElement('button');
259-
undoChangesButton.className = 'fa fa-history reset-button';
262+
undoChangesButton.className = 'reset-button';
260263
undoChangesButton.title = 'Undo changes';
261264
undoChangesButton.setAttribute('aria-label', undoChangesButton.title);
265+
undoChangesButton.innerHTML += document.getElementById('fa-history').innerHTML;
262266

263267
buttons.insertBefore(undoChangesButton, buttons.firstChild);
264268

@@ -561,12 +565,12 @@ function playground_text(playground) {
561565

562566
function hideTooltip(elem) {
563567
elem.firstChild.innerText = "";
564-
elem.className = 'fa fa-copy clip-button';
568+
elem.className = 'clip-button';
565569
}
566570

567571
function showTooltip(elem, msg) {
568572
elem.firstChild.innerText = msg;
569-
elem.className = 'fa fa-copy tooltipped';
573+
elem.className = 'tooltipped';
570574
}
571575

572576
var clipboardSnippets = new ClipboardJS('.clip-button', {

‎src/theme/css/chrome.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ a > .hljs {
5151
#menu-bar.bordered {
5252
border-bottom-color: var(--table-border-color);
5353
}
54-
#menu-bar i, #menu-bar .icon-button {
54+
#menu-bar .fa-svg, #menu-bar .icon-button {
5555
position: relative;
5656
padding: 0 8px;
5757
z-index: 10;
@@ -60,7 +60,7 @@ a > .hljs {
6060
transition: color 0.5s;
6161
}
6262
@media only screen and (max-width: 420px) {
63-
#menu-bar i, #menu-bar .icon-button {
63+
#menu-bar .fa-svg, #menu-bar .icon-button {
6464
padding: 0 5px;
6565
}
6666
}
@@ -71,7 +71,7 @@ a > .hljs {
7171
padding: 0;
7272
color: inherit;
7373
}
74-
.icon-button i {
74+
.icon-button .fa-svg {
7575
margin: 0;
7676
}
7777

@@ -113,14 +113,14 @@ a > .hljs {
113113
.mobile-nav-chapters,
114114
.mobile-nav-chapters:visited,
115115
.menu-bar .icon-button,
116-
.menu-bar a i {
116+
.menu-bar a .fa-svg {
117117
color: var(--icons);
118118
}
119119

120-
.menu-bar i:hover,
120+
.menu-bar .fa-svg:hover,
121121
.menu-bar .icon-button:hover,
122122
.nav-chapters:hover,
123-
.mobile-nav-chapters i:hover {
123+
.mobile-nav-chapters .fa-svg:hover {
124124
color: var(--icons-hover);
125125
}
126126

@@ -217,7 +217,7 @@ pre > .buttons {
217217
pre > .buttons :hover {
218218
color: var(--sidebar-active);
219219
}
220-
pre > .buttons i {
220+
pre > .buttons .fa-svg {
221221
margin-left: 8px;
222222
}
223223
pre > .buttons button {

‎src/theme/css/general.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,3 +172,10 @@ blockquote {
172172
margin: 5px 0px;
173173
font-weight: bold;
174174
}
175+
176+
.fa-svg svg {
177+
width: 1em;
178+
height: 1em;
179+
fill: currentColor;
180+
margin-bottom: -0.1em;
181+
}

‎src/theme/index.hbs

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
<link rel="stylesheet" href="{{ path_to_root }}css/print.css" media="print">
3333

3434
<!-- Fonts -->
35-
<link rel="stylesheet" href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
3635
{{#if copy_fonts}}
3736
<link rel="stylesheet" href="{{ path_to_root }}fonts/fonts.css">
3837
{{/if}}
@@ -114,10 +113,10 @@
114113
<div id="menu-bar" class="menu-bar sticky bordered">
115114
<div class="left-buttons">
116115
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
117-
<i class="fa fa-bars"></i>
116+
{{fa "solid" "bars"}}
118117
</button>
119118
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
120-
<i class="fa fa-paint-brush"></i>
119+
{{fa "solid" "paint-brush"}}
121120
</button>
122121
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
123122
<li role="none"><button role="menuitem" class="theme" id="light">{{ theme_option "Light" }}</button></li>
@@ -128,7 +127,7 @@
128127
</ul>
129128
{{#if search_enabled}}
130129
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
131-
<i class="fa fa-search"></i>
130+
{{fa "solid" "search"}}
132131
</button>
133132
{{/if}}
134133
</div>
@@ -137,11 +136,11 @@
137136

138137
<div class="right-buttons">
139138
<a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">
140-
<i id="print-button" class="fa fa-print"></i>
139+
{{fa "solid" "print" "print-button"}}
141140
</a>
142141
{{#if git_repository_url}}
143142
<a href="{{git_repository_url}}" title="Git repository" aria-label="Git repository">
144-
<i id="git-repository-button" class="fa {{git_repository_icon}}"></i>
143+
{{fa "solid" git_repository_icon}}
145144
</a>
146145
{{/if}}
147146
</div>
@@ -178,13 +177,13 @@
178177
<!-- Mobile navigation buttons -->
179178
{{#previous}}
180179
<a rel="prev" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
181-
<i class="fa fa-angle-left"></i>
180+
{{fa "solid" "angle-left"}}
182181
</a>
183182
{{/previous}}
184183

185184
{{#next}}
186185
<a rel="next" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
187-
<i class="fa fa-angle-right"></i>
186+
{{fa "solid" "angle-right"}}
188187
</a>
189188
{{/next}}
190189

@@ -196,19 +195,25 @@
196195
<nav class="nav-wide-wrapper" aria-label="Page navigation">
197196
{{#previous}}
198197
<a rel="prev" href="{{ path_to_root }}{{link}}" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
199-
<i class="fa fa-angle-left"></i>
198+
{{fa "solid" "angle-left"}}
200199
</a>
201200
{{/previous}}
202201

203202
{{#next}}
204203
<a rel="next" href="{{ path_to_root }}{{link}}" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
205-
<i class="fa fa-angle-right"></i>
204+
{{fa "solid" "angle-right"}}
206205
</a>
207206
{{/next}}
208207
</nav>
209208

210209
</div>
211210

211+
<template id=fa-eye>{{fa "solid" "eye"}}</template>
212+
<template id=fa-eye-slash>{{fa "solid" "eye-slash"}}</template>
213+
<template id=fa-copy>{{fa "regular" "copy"}}</template>
214+
<template id=fa-play>{{fa "solid" "play"}}</template>
215+
<template id=fa-history>{{fa "solid" "history"}}</template>
216+
212217
{{#if livereload}}
213218
<!-- Livereload script (if served using the cli tool) -->
214219
<script type="text/javascript">

0 commit comments

Comments
 (0)