From e95cccc66fa95b80aa3433c79b12faebdec0ca7c Mon Sep 17 00:00:00 2001 From: rays Date: Fri, 11 Sep 2026 15:14:51 +0000 Subject: [PATCH] Icons are Font Awesome Free, embedded as SVG The ICON set is now Font Awesome Free 7.3.1: the 29 icons the page uses, taken from svgs/solid and svgs/regular at that tag and embedded as SVG paths, 12.8 KB in all. No webfont to download and nothing fetched from a CDN. The CC BY 4.0 attribution is above the set, and in the README. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_016HdTEWQNrzyFULijigkmMn --- CHANGELOG.md | 5 ++-- README.md | 3 ++ web/index.html | 76 ++++++++++++++++++++++++-------------------------- 3 files changed, 42 insertions(+), 42 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b28c95..2bdd584 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,8 +34,9 @@ The long form, with what was wrong before and how it was found, is in - Buttons are icons, with the words in their tooltips: the Files pane (save, delete, view, download), an item's own buttons (mark read, keep, open the original), the feed header (scan, download latest, mark all read, settings, unsubscribe), and the Settings, feed settings and - Download latest dialogs (save, download, cancel). The icons are drawn, from one set, rather - than font characters: ⟳ ⤓ ↗ and the like came out thin and tiny and differed from font to + Download latest dialogs (save, download, cancel). The icons are Font Awesome Free, embedded as + SVG: only the ones used, no font to download, and nothing fetched from anyone else. They + replace font characters such as ⟳ ⤓ ↗, which came out thin and tiny and differed from font to font. Keep is a flag everywhere, as it was in the original. - A file's state and type are icons: a check when it is downloaded, a warning when it failed (the error is in the tooltip), and nothing while it waits; audio, video, image, PDF, torrent diff --git a/README.md b/README.md index 1ad52e1..079473a 100644 --- a/README.md +++ b/README.md @@ -118,3 +118,6 @@ npx playwright test # a real browser against a real daemon ## License MIT. See [LICENSE](LICENSE). + +The icons are [Font Awesome Free](https://fontawesome.com) 7.3.1 by @fontawesome, under +[CC BY 4.0](https://fontawesome.com/license/free), embedded as SVG in `web/index.html`. diff --git a/web/index.html b/web/index.html index a2f48c6..467e734 100644 --- a/web/index.html +++ b/web/index.html @@ -236,12 +236,8 @@ a.btn{text-decoration:none;color:inherit} .btn.danger:hover{border-color:var(--bad);color:var(--bad)} /* An icon in place of a word; the word is in its tooltip. */ .btn.ico{padding:4px 9px;min-width:32px;font-size:14px;line-height:1.25;text-align:center} -/* A drawn icon: bold strokes in the button's own colour. */ -.i{ - display:inline-block;width:16px;height:16px;vertical-align:-3px;flex:none; - fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; -} -.i.f{fill:currentColor;stroke:none} +/* An icon (Font Awesome, embedded as SVG) in the button's own colour. */ +.i{display:inline-block;width:16px;height:16px;vertical-align:-3px;flex:none;fill:currentColor} /* A file's state and type, as icons in place of the old DOWNLOADED / PENDING / audio chips. */ .fst,.kind{display:inline-grid;place-items:center} .fst{color:var(--good)} @@ -594,41 +590,41 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu const $ = (s,r=document)=>r.querySelector(s); const $$ = (s,r=document)=>[...r.querySelectorAll(s)]; const esc = s => (s??'').replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); -// Drawn, not typed. Characters such as ⟳ ⤓ ↗ came out thin and tiny and looked different in -// every font. These are one set, in bold strokes of the button's own colour, so they read the -// same in every theme and browser. A second argument fills the shape instead of outlining it. -const drawn=(body,fill)=>``; +// Icons: Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com +// License - https://fontawesome.com/license/free (Icons: CC BY 4.0). Embedded as SVG, only the +// ones used, so there is no font to download and nothing is fetched from anyone else. Each takes +// the button's own colour. To add one, copy the path from svgs/