Switch fontawesome from font files to svg sprites

Fixes rust-lang#790

README.md

@@ -220,18 +220,9 @@ cargo run -- queue add <CRATE> <VERSION>
 
 ### Updating vendored sources
 
-The instructions & links for updating Font Awesome can be found [on their website](https://fontawesome.com/how-to-use/on-the-web/using-with/sass). Similarly, Pure-CSS also [explains on theirs](https://purecss.io/start/).
+The instructions & links for updating Font Awesome can be found [on their website](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites). Similarly, Pure-CSS also [explains on theirs](https://purecss.io/start/).
 
 When updating Font Awesome, make sure to change `$fa-font-path` in `scss/_variables.scss` (it should be at the top of the file) to `../-/static`. This will point font awesome at the correct path from which to request font and icon resources.
-<!--
-    TODO: Whenever scss modules are avaliable, use [scss modules](https://sass-lang.com/documentation/at-rules/use#configuration)
-    instead of manually editing the `_variables.scss` file. Something like this should work:
-    ```scss
-    @use "fontawesome" with (
-        $fa-font-path: "../-/static"
-    );
-    ```
--->
 
 ### Contact
 

build.rs

@@ -18,7 +18,6 @@ fn main() {
     println!("cargo:rerun-if-changed=templates/menu.js");
     println!("cargo:rerun-if-changed=templates/index.js");
     println!("cargo:rerun-if-changed=vendor/");
-    println!("cargo:rerun-if-changed=vendor/fontawesome/scss/_variables.scss");
     // TODO: are these right?
     println!("cargo:rerun-if-changed=.git/HEAD");
     println!("cargo:rerun-if-changed=.git/index");
@@ -92,7 +91,6 @@ fn compile_sass() -> Result<(), Box<dyn Error>> {
         "vendored",
         "vendored",
         &[
-            concat!(env!("CARGO_MANIFEST_DIR"), "/vendor/fontawesome/scss").to_owned(),
             concat!(env!("CARGO_MANIFEST_DIR"), "/vendor/pure-css/css").to_owned(),
         ],
     )?;

src/web/page/templates.rs

@@ -287,9 +287,9 @@ enum IconType {
 impl fmt::Display for IconType {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         let icon = match self {
-            Self::Strong => "fas",
-            Self::Regular => "far",
-            Self::Brand => "fab",
+            Self::Strong => "fa-solid",
+            Self::Regular => "fa-regular",
+            Self::Brand => "fa-brands",
         };
 
         f.write_str(icon)
@@ -301,7 +301,7 @@ impl tera::Filter for IconType {
         let mut aria_hidden = true;
         let class = tera::escape_html(value.as_str().expect("Icons only take strings"));
         let fixed_width = if args.get("fw").and_then(|fw| fw.as_bool()).unwrap_or(false) {
-            " fa-fw"
+            " class=\"fa-svg-fw\""
         } else {
             ""
         };
@@ -324,9 +324,9 @@ impl tera::Filter for IconType {
             .unwrap_or(aria_hidden);
 
         let icon = format!(
-            r#"<span aria-hidden="{aria_hidden}" class="{icon_class} fa-{fa_class}{fw}"{aria_label}{id}></span>"#,
+            r#"<span{fw}><svg class="fa-svg" viewBox="0 0 512 512" aria-hidden="{aria_hidden}"{aria_label}{id}><use xlink:href="/-/static/{icon_file}.svg#{fa_class}"/></svg></span>"#,
             aria_hidden = aria_hidden,
-            icon_class = self,
+            icon_file = self,
             fa_class = class,
             fw = fixed_width,
             aria_label = aria_label,

src/web/statics.rs

@@ -14,7 +14,7 @@ const VENDORED_CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/vendored.css"
 const STYLE_CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/style.css"));
 const MENU_JS: &str = include_str!(concat!(env!("OUT_DIR"), "/menu.js"));
 const INDEX_JS: &str = include_str!(concat!(env!("OUT_DIR"), "/index.js"));
-const STATIC_SEARCH_PATHS: &[&str] = &["vendor/fontawesome/webfonts", "vendor/pure-css/css"];
+const STATIC_SEARCH_PATHS: &[&str] = &["vendor/fontawesome/sprites", "vendor/pure-css/css"];
 
 pub(crate) fn static_handler(req: &mut Request) -> IronResult<Response> {
     let router = extension!(req, Router);
@@ -247,11 +247,7 @@ mod tests {
 
             let files = &[
                 ("pure-min.css", "text/css"),
-                ("fa-brands-400.eot", "application/vnd.ms-fontobject"),
-                ("fa-brands-400.svg", "image/svg+xml"),
-                ("fa-brands-400.ttf", "application/x-font-ttf"),
-                ("fa-brands-400.woff", "application/font-woff"),
-                ("fa-brands-400.woff2", "application/font-woff2"),
+                ("fa-brands.svg", "image/svg+xml"),
             ];
 
             for (file, mime) in files {

templates/header/global_alert.html

@@ -5,7 +5,7 @@
 {%- if global_alert -%}
     <li class="pure-menu-item">
         <a href="{{ global_alert.url | safe }}" class="pure-menu-link {{ global_alert.css_class }}">
-            <i class="{{ global_alert.fa_icon | fas(fw=true) }}"></i>
+            <svg class=fa-svg viewBox="0 0 512 512"><use xlink:href="/-/static/fa-solid.svg#{{ global_alert.fa_icon }}"></svg>
             {{ global_alert.text }}
         </a>
     </li>

templates/style/base.scss

@@ -315,11 +315,6 @@ div.package-page-container {
             margin-top: 0;
         }
 
-        li i.fa {
-            display: inline-block;
-            width: 20px;
-        }
-
         a.pure-menu-link {
             font-size: 14px;
             color: $color-standard;
@@ -603,3 +598,17 @@ h3 > code,
 h4 > code {
     display: inline-block;
 }
+
+.fa-svg {
+    width: 1em;
+    fill: currentColor;
+    /* pull icon about one stroke width into the descenders */
+    margin-bottom: -0.1em;
+}
+
+.fa-svg-fw {
+    width: 1.25em;
+    text-align: center;
+    display: inline-block;
+}
+

templates/style/vendored.scss

@@ -1,3 +1,2 @@
-@import "fontawesome", "regular", "solid", "brands", "pure-min",
-    "grids-responsive-min";
+@import "pure-min", "grids-responsive-min";
 

vendor/fontawesome/VENDOR.txt

@@ -0,0 +1 @@
+Downloaded from https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself