Fix: changed symbols from SVG to ICON using FontAwesome

Alkaison · Alkaison · commit 8d7f05657810 · 2023-06-13T21:18:48.000+05:30
diff --git a/index.html b/index.html
@@ -7,6 +7,8 @@
 
     <!-- External CSS -->
     <link rel="stylesheet" href="./style.css">
+    <!-- FontAwesome ICON -->
+    <script src="https://kit.fontawesome.com/5289663089.js" crossorigin="anonymous"></script>
 </head>
 <body>
     
@@ -25,65 +27,33 @@ <h1 id="todoTitle">ToDo App</h1>
         <div class="task-container">
             <div class="task">
                 <!-- Pending Task -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="pendingSvg" height="1em" viewBox="0 0 512 512">
-                    <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" />
-                </svg>
+                <i class="fa-regular fa-circle pendingSvg"></i>
 
                 <span class="taskText">Follow @Alkaison on Twitter</span>
 
                 <!-- Edit ICON -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="editSvg" height="1em" viewBox="0 0 512 512">
-                    <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
-                </svg>
+                <i class="fa-solid fa-pencil editSvg"></i>
 
                 <!-- Delete ICON -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="deleteSvg" height="1em" viewBox="0 0 448 512">
-                    <path
-                        d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
-                </svg>
+                <i class="fa-solid fa-trash deleteSvg"></i>
             </div>
 
             <div class="task">
-                <!-- Pending Task -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="pendingSvg" height="1em" viewBox="0 0 512 512">
-                    <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" />
-                </svg>
+                <i class="fa-regular fa-circle pendingSvg"></i>
 
                 <span class="taskText">Complete the first task</span>
 
-                <!-- Edit ICON -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="editSvg" height="1em" viewBox="0 0 512 512">
-                    <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
-                </svg>
-
-                <!-- Delete ICON -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="deleteSvg" height="1em" viewBox="0 0 448 512">
-                    <path
-                        d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
-                </svg>
+                <i class="fa-solid fa-pencil editSvg"></i>
+                <i class="fa-solid fa-trash deleteSvg"></i>
             </div>
 
             <div class="task">
-                <!-- Pending Task -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="pendingSvg" height="1em" viewBox="0 0 512 512">
-                    <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" />
-                </svg>
-
+                <i class="fa-regular fa-circle pendingSvg"></i>
+                
                 <span class="taskText">Thank you for visiting here</span>
 
-                <!-- Edit ICON -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="editSvg" height="1em" viewBox="0 0 512 512">
-                    <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
-                </svg>
-
-                <!-- Delete ICON -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="deleteSvg" height="1em" viewBox="0 0 448 512">
-                    <path
-                        d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
-                </svg>
+                <i class="fa-solid fa-pencil editSvg"></i>
+                <i class="fa-solid fa-trash deleteSvg"></i>
             </div>
         </div>
 
diff --git a/style.css b/style.css
@@ -68,33 +68,39 @@ body {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
+    text-align: center;
 }
 .pendingSvg {
-    width: 20px;
-    height: 20px;
-    fill: rgb(0, 0, 0);
+    width: 30px;
+    height: 30px;
+    padding-top: 7px;
+    font-size: 18px;
+    color: rgb(0, 0, 0);
     cursor: pointer;
 }
 .taskText {
     width: 270px;
     word-wrap: break-word;
     color: rgb(32, 28, 28);
     line-height: 1.4rem;
-    padding-left: 4px;
+    text-align: left;
 }
 .editSvg {
     width: 30px;
     height: 30px;
-    padding: 5px;
+    padding-top: 7px;
+    font-size: 18px;
+    color:rgb(32, 28, 28);
     border-radius: 4px;
     cursor: pointer;
 }
 .deleteSvg {
     width: 30px;
     height: 30px;
-    padding: 6px;
+    padding-top: 7px;
+    font-size: 18px;
     border-radius: 4px;
-    fill: white;
+    color: white;
     background-color: red;
     cursor: pointer;
 }
