FontAwesome

web/font_awesome.css

+@font-face {
+  font-family: 'Font Awesome 5 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("/fontawesome/fa-brands-400.woff2") format("woff2"); 
+}
+
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("/fontawesome/fa-regular-400.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("/fontawesome/fa-solid-900.woff2") format("woff2");
+}
\ No newline at end of file

web/fontawesome/LICENSE.txt

+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**

web/index.html

@@ -19,10 +19,10 @@
     
       <input type="date" name="due_date"/>
     
-      <button id="delete_button">Delete</button>
+      <button id="delete_button"> Delete</button>
     </task-detail>
 
-    <button id="add_button">Add Task</button>
+    <button id="add_button"> Add Task</button>
 
   </body>
 </html>
\ No newline at end of file

web/main.css

+@import "./font_awesome.css";
+
 body {
   display: grid;
   grid-template: 
@@ -5,7 +7,6 @@ body {
     "controls controls" 40px
     /1fr      1fr
   ;
-
 }
 
 task-list {
@@ -31,4 +32,18 @@ task-detail {
 
 #add_button { 
   grid-area: controls;
-}
\ No newline at end of file
+}
+
+#add_button::before {
+  content: "\f0fe"; /* plus square */
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  color: green;
+}
+
+#delete_button::before {
+  content: "\f2ed"; /* trash can */
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  color: red;
+}