Skip to content

Commit c95e61b

Browse files
authored
Replace usages of Font Awesome with Material Icons (#5013)
This replaces the remaining usages of Font Awesome with Material Icons and removes Font Awesome. The way we are using Font Awesome is resulting in a 436kB download then JS running on top of that. Before even considering the JS parsing/running, it accounts for 318ms out of 545ms of the site load on my internet on Chrome Dev 116. Fixes #3790
1 parent 615c0bc commit c95e61b

File tree

6 files changed

+26
-16
lines changed

6 files changed

+26
-16
lines changed

_config.yml

+7-7
Original file line numberDiff line numberDiff line change
@@ -96,30 +96,30 @@ og_image_vers: "?2"
9696
alert:
9797
important: >-
9898
<aside class="alert alert-warning" role="alert" markdown="1">
99-
<i class="fas fa-exclamation-circle"></i> **Important:**
99+
<i class="material-icons" aria-hidden="true">error</i> **Important:**
100100
info: >-
101101
<aside class="alert alert-info" role="alert" markdown="1">
102-
<i class="fas fa-info-circle"></i>
102+
<i class="material-icons" aria-hidden="true">info</i>
103103
note: >-
104104
<aside class="alert alert-info" role="alert" markdown="1">
105-
<i class="fas fa-info-circle"></i> **Note:**
105+
<i class="material-icons" aria-hidden="true">info</i> **Note:**
106106
flutter-note: >-
107107
<aside class="alert alert-info" role="alert" markdown="1">
108108
<img src="/assets/img/shared/flutter/icon/64.png" width="24" alt="Flutter logo"> **Flutter note:**
109109
version-note: >-
110110
<aside class="alert alert-info" role="alert" markdown="1">
111-
<i class="fas fa-code-branch"></i> **Version note:**
111+
<i class="material-icons" aria-hidden="true">merge_type</i> **Version note:**
112112
secondary: >-
113113
<aside class="alert alert-secondary" role="alert" markdown="1">
114114
tip: >-
115115
<aside class="alert alert-success" role="alert" markdown="1">
116-
<i class="far fa-lightbulb"></i> **Tip:**
116+
<i class="material-icons" aria-hidden="true">tips_and_updates</i> **Tip:**
117117
warn: >-
118118
<aside class="alert alert-warning" role="alert" markdown="1">
119-
<i class="fas fa-exclamation-triangle"></i>
119+
<i class="material-icons" aria-hidden="true">report_problem</i>
120120
warning: >-
121121
<aside class="alert alert-warning" role="alert" markdown="1">
122-
<i class="fas fa-exclamation-triangle"></i> **Warning:**
122+
<i class="material-icons" aria-hidden="true">report_problem</i> **Warning:**
123123
end: </aside>
124124

125125
why:

src/_includes/head.html

-4
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,6 @@
6363
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet">
6464
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
6565
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">
66-
<script
67-
src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
68-
data-auto-replace-svg="nest">
69-
</script>
7066

7167
<link rel="stylesheet" href="{{ '/assets/css/main.css' | append: cache_bust }}">
7268
{% for css in page.css -%}

src/_sass/_dash.scss

+6
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ $dash-max-width: 1330px;
6767
color: $dash-dark-grey;
6868
margin-top: 16px;
6969

70+
& svg {
71+
width: 1em;
72+
height: 1em;
73+
}
74+
7075
@include bootstrap.media-breakpoint-down(md) {
7176
font-size: 14px;
7277
margin-left: 30px;
@@ -75,6 +80,7 @@ $dash-max-width: 1330px;
7580

7681
a {
7782
color: $dash-dark-grey;
83+
vertical-align: bottom;
7884

7985
&:hover, &:focus, &:active {
8086
color: $white-base;

src/_sass/site.scss

+6
Original file line numberDiff line numberDiff line change
@@ -573,6 +573,12 @@ h3.popover-header {
573573
margin-top: 1rem;
574574
padding: 30px 30px;
575575

576+
i.material-icons {
577+
font-size: 20px;
578+
user-select: none;
579+
vertical-align: -4px;
580+
}
581+
576582
code {
577583
background-color: transparent;
578584
}

src/_tutorials/web/get-started.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ More information:
8282

8383
## 3. Get CLI tools or an IDE (or both)
8484

85-
<i class="fas fa-terminal dark"></i>
85+
<i class="material-icons">terminal</i>
8686
If you like to use the command line, install [webdev][]:
8787

8888
```terminal
@@ -97,7 +97,7 @@ For a list of available IDEs, see the
9797

9898
## 4. Create a web app
9999

100-
<i class="fas fa-terminal dark"></i>
100+
<i class="material-icons">terminal</i>
101101
To create a web app from the command line, use these commands:
102102

103103
```terminal
@@ -111,7 +111,7 @@ create a project using the template named **Bare-bones Web App**.
111111

112112
## 5. Run the app
113113

114-
<i class="fas fa-terminal dark"></i>
114+
<i class="material-icons">terminal</i>
115115
To run the app from the command line, use [webdev][] to build and serve the app:
116116

117117
```terminal

src/index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@
3838
<div class="callout-oss">
3939
<p>Dart is free and open source
4040
&nbsp;<a href="https://github.com/dart-lang/" title="Dart project GitHub organization"
41-
class="no-automatic-external"><i class="fab fa-github fa-sm"></i></a>
41+
class="no-automatic-external">
42+
<svg><use href="/assets/img/social/github.svg#github"></use></svg>
43+
</a>
4244
</p>
4345
</div>
4446

@@ -415,7 +417,7 @@ <h2>Try Dart in your browser</h2>
415417
<label for="dartpad-select" class="sr-only">Select an example:</label>
416418
<select id="dartpad-select"></select>
417419
<div id="dartpad-host"></div>
418-
<h3>Want more practice? <a href="/language">Learn the language</a>,
420+
<h3>Want more practice? <a href="/language">Learn the language</a>,
419421
explore the <a href="/guides/libraries/library-tour">core libraries</a>,
420422
or <a href="/tutorials/server/get-started">build a command-line app</a>.</h3>
421423
</div>

0 commit comments

Comments
 (0)