From 372bd75217bb2bef0aa79980a88dcab971fd3e02 Mon Sep 17 00:00:00 2001
From: Ajmal Cybro <ajmal@cybrosys.in>
Date: Fri, 1 Jan 2021 17:29:53 +0530
Subject: [PATCH] [UPDT] Index Updated

---
 .../static/description/index.html             | 26 ++++----
 .../static/description/index.html             |  8 +--
 buy_now_button/static/description/index.html  | 16 ++---
 .../static/description/index.html             | 32 +++++-----
 .../static/description/index.html             | 16 ++---
 .../static/description/index.html             | 22 +++----
 .../static/description/index.html             | 16 ++---
 .../static/description/index.html             | 18 +++---
 .../static/description/index.html             | 32 +++++-----
 .../static/description/index.html             | 12 ++--
 pos_book_order/static/description/index.html  | 62 +++++++++----------
 pos_multi_note/static/description/index.html  | 28 ++++-----
 .../static/description/index.html             | 38 ++++++------
 pos_waiter/static/description/index.html      | 34 +++++-----
 .../static/description/index.html             | 24 +++----
 .../static/description/index.html             | 18 +++---
 .../static/description/index.html             | 18 +++---
 .../static/description/index.html             | 18 +++---
 .../static/description/index.html             | 10 +--
 19 files changed, 222 insertions(+), 226 deletions(-)

diff --git a/account_payment_instalment/static/description/index.html b/account_payment_instalment/static/description/index.html
index 6316eff44..9a3c24448 100644
--- a/account_payment_instalment/static/description/index.html
+++ b/account_payment_instalment/static/description/index.html
@@ -13,13 +13,13 @@
         </div>
         <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
         <ul style=" padding: 0 1px; list-style: none; ">
-            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; "alt="check">
+            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                 Instalment payment method for customers.
             </li>
-            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png"style=" width: 22px; margin-right: 6px; "alt="check">
+            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                 Different types of instalments.
             </li>
-            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png"style=" width: 22px; margin-right: 6px; "alt="check">
+            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                 Post journal entries with due dates.
             </li>
         </ul>
@@ -87,24 +87,24 @@
 
                             <li class="mb8"
                                 style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                                <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                                <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                 Provision for instalment in the payment terms.
                             </li>
 
                             <li class="mb8"
                                 style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                                <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                                <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                 Instalment by days, months and years.
                             </li>
 
                             <li class="mb8"
                                 style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                                <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                                <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                 Period type and number of instalments in the payment lines.
 
                             </li>
                             <!--            <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">-->
-                            <!--			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Simply handle the add-on and its configuration from the backend menu. </li>-->
+                            <!--			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Simply handle the add-on and its configuration from the backend menu. </li>-->
 
                         </ul>
                     </div>
@@ -127,8 +127,7 @@
                                                      style="float: left;">
                                                     <h3 class="alert"
                                                         style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;">
-                                                        <img src="images/checked.png"
-                                                             style=" width: 22px; margin-right: 6px; " alt="check">
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                                         Provision for instalment in the payment terms.</h3>
 
                                                     <div style=""><img class="img img-responsive center-block"
@@ -142,8 +141,7 @@
                                                      style="float: left;">
                                                     <h3 class="alert"
                                                         style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;">
-                                                        <img src="images/checked.png"
-                                                             style=" width: 22px; margin-right: 6px; " alt="check">
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                                         Payment term form view. You can see the period and number of instalments in the payment lines.</h3>
                                                     <div style=""><img class="img img-responsive center-block"
                                                                        style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
@@ -157,8 +155,7 @@
                                                      style="float: left;">
                                                     <h3 class="mb32 alert"
                                                         style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <img src="images/checked.png"
-                                                             style=" width: 22px; margin-right: 6px; " alt="check">You
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>You
                                                         choose the created payment term while creating the invoice.</h3>
 
                                                     <div style=""><img class="img img-responsive center-block"
@@ -172,8 +169,7 @@
                                                      style="float: left;">
                                                     <h3 class="alert"
                                                         style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <img src="images/checked.png"
-                                                             style=" width: 22px; margin-right: 6px; " alt="check">
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                                         Now you can check the journal entries of that particular invoice.
                                                         You can see the debit amount and the due dates.
                                                     </h3>
diff --git a/automatic_payroll/static/description/index.html b/automatic_payroll/static/description/index.html
index 1151f38fe..b8fdae350 100644
--- a/automatic_payroll/static/description/index.html
+++ b/automatic_payroll/static/description/index.html
@@ -19,12 +19,12 @@
          </div>
          <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
          <ul style=" padding: 0 1px; list-style: none; ">
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Automatic payroll generation for Odoo12 community edition.</li>
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Generate payslip batches via adding all active employees.</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Automatic payroll generation for Odoo12 community edition.</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Generate payslip batches via adding all active employees.</li>
 
-		 <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> The feature works with the help of scheduler.</li>
+		 <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> The feature works with the help of scheduler.</li>
 		
-		 <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Schedule the activity for month first,month end or specific day. </li>
+		 <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Schedule the activity for month first,month end or specific day. </li>
 		
          <div style=" text-align: left; ">
              <a href="#video" style="display: -webkit-inline-box;display: -webkit-inline-flex;display: -ms-inline-flexbox; display: inline-flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center; -webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;padding: 0 30px;font-size: 15px;height: 56px;text-transform: uppercase;border: 1px solid #f21692;color: #000;border-radius: 50px;text-decoration: none;letter-spacing: 1px;"><i class="fa fa-eye" aria-hidden="true" style="margin-right: 5px;"></i> Video Demo</a>
diff --git a/buy_now_button/static/description/index.html b/buy_now_button/static/description/index.html
index ad0fcce36..e15772e05 100644
--- a/buy_now_button/static/description/index.html
+++ b/buy_now_button/static/description/index.html
@@ -10,9 +10,9 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">The module adds a button 'Buy Now' to the product in Shop page.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Buyers can click on the button "Buy Now" which takes the product directly to the shopping page for checkout and confirmation. </li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">  Keeps existing cart product.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>The module adds a button 'Buy Now' to the product in Shop page.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Buyers can click on the button "Buy Now" which takes the product directly to the shopping page for checkout and confirmation. </li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>  Keeps existing cart product.</li>
     </ul>
     
   </div>
@@ -84,7 +84,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Click on the button "Buy Now" to purchase. It moves to the confirmation page.</h3>
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Click on the button "Buy Now" to purchase. It moves to the confirmation page.</h3>
 			
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="buy_now_website_2.png"> </div>
            </div>
@@ -92,7 +92,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">The Order Confirmation page. Click on the 'pay button to confirm payment'.</h3>	
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>The Order Confirmation page. Click on the 'pay button to confirm payment'.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="buy_now_website_3.png"> </div>
           </div>
@@ -102,7 +102,7 @@
 		 
       <<!-- div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Click on a product which has the add-on items in the point of sale screen. It will show a sidebar menu with all the add-on items. </h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Click on a product which has the add-on items in the point of sale screen. It will show a sidebar menu with all the add-on items. </h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="addon-list.png"> </div>
           </div>
@@ -111,7 +111,7 @@
 		 
 	<!-- <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Click on any add-on in order to add it under the product in the order line.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Click on any add-on in order to add it under the product in the order line.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="addon-list-orderline.png"> </div>
            </div>
@@ -121,7 +121,7 @@
  <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">The add-on and its price will be shown in the receipt. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>The add-on and its price will be shown in the receipt. </h3>
 		   
           <div style="">
 			  
diff --git a/cash_flow_statement/static/description/index.html b/cash_flow_statement/static/description/index.html
index 1f753e9b5..cfd3cea75 100644
--- a/cash_flow_statement/static/description/index.html
+++ b/cash_flow_statement/static/description/index.html
@@ -10,16 +10,16 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Cash-flow statements for Odoo12 community edition.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Cash-flow statements for Odoo12 community edition.</li>
     </ul>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Shows the amount of cash in and cash out flow.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Shows the amount of cash in and cash out flow.</li>
     </ul>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Can set accounts for each cash flow types.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Can set accounts for each cash flow types.</li>
     </ul>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Separately views the credit and debit values of each accounts.
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Separately views the credit and debit values of each accounts.
 </li>
     </ul>
     
@@ -69,14 +69,14 @@
           <ul>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Cash-flow statements for Odoo12 community edition.</li>	  
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Cash-flow statements for Odoo12 community edition.</li>
           <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-      <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Shows the amount of cash in and out flow.
+      <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Shows the amount of cash in and out flow.
 </li>
       <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-      <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Can set accounts for each cash flow types.</li>   
+      <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Can set accounts for each cash flow types.</li>
           <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-      <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Separately views the credit and debit values of each accounts.</li>   
+      <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Separately views the credit and debit values of each accounts.</li>
           </ul>
         </div>
 		  
@@ -94,7 +94,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, go to Configuration > Chart of Accounts to configure chart of accounts.
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, go to Configuration > Chart of Accounts to configure chart of accounts.
 </h3>
 			
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/cash_flow_statements-6.png"> </div>
@@ -103,7 +103,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Choose one account that you want to configure and set corresponding cash flow type.</h3>	
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Choose one account that you want to configure and set corresponding cash flow type.</h3>
 		  
 	  
     <a href="https://www.hireodoodevelopers.com/" target="_blank"><div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/cash_flow_statements-1.png"> </div>
@@ -114,7 +114,7 @@
 		 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Then go to Reporting > Cash Flow Statements for printing cash flow statements.</h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Then go to Reporting > Cash Flow Statements for printing cash flow statements.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/cash_flow_statements-2.png"> </div>
           </div>
@@ -123,7 +123,7 @@
 		 
 	<div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">The printing wizard will be like below.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>The printing wizard will be like below.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/cash_flow_statements-3.png"> </div>
            </div>
@@ -133,7 +133,7 @@
  <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">If we print the cash flow statement without enabling debit/credit option, then the report will be like below.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>If we print the cash flow statement without enabling debit/credit option, then the report will be like below.</h3>
 		   
           <div style="">
 			  
@@ -144,7 +144,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">When enabled debit/credit option, the report print like below.
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>When enabled debit/credit option, the report print like below.
 </h3>
 		   
           <div style="">
@@ -156,7 +156,7 @@
 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">If we provide start date while printing, then it shows some additional lines.</h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>If we provide start date while printing, then it shows some additional lines.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/cash_flow_statements-7.png"> </div>
           </div>
@@ -165,7 +165,7 @@
 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Enabled debit/credit option.</h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Enabled debit/credit option.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/cash_flow_statements-8.png"> </div>
           </div>
diff --git a/dynamic_partner_fields/static/description/index.html b/dynamic_partner_fields/static/description/index.html
index 8f53154f3..18a1da9e0 100644
--- a/dynamic_partner_fields/static/description/index.html
+++ b/dynamic_partner_fields/static/description/index.html
@@ -7,7 +7,7 @@
       </div>
       <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
       <ul style=" padding: 0 1px; list-style: none; ">
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Creates custom fields on Partner.</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Creates custom fields on Partner.</li>
       </ul>
    </div>
    <div class="col-md-5 col-sm-12 col-xs-12"> <img src="images/dynamic_product_fields_2.png" class="img-responsive" alt=""> </div>
@@ -44,13 +44,13 @@
                   <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
                   <ul>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Creates custom fields on partner without coding
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Creates custom fields on partner without coding
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Can easily set the position of fields
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Can easily set the position of fields
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Can set the field is required or not and the type of field.
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Can set the field is required or not and the type of field.
                      </li>
                   </ul>
                </div>
@@ -65,14 +65,14 @@
                               <div class="carousel-inner">
                                  <div class="carousel-item active" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, Give Acces to the user to 'Create Fields' from User settings.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, Give Acces to the user to 'Create Fields' from User settings.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_1.png"> </div>
                                     </div>
                                  </div>
 
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Click 'Create Fields' Button to create custom fields.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Click 'Create Fields' Button to create custom fields.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_7.png"> </div>
                                     </div>
                                  </div>
@@ -80,7 +80,7 @@
 
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                        <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">You need to select model and field type and you can set the field is required or not.</h3>
+                                        <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>You need to select model and field type and you can set the field is required or not.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_3.png"> </div>
                                     </div>
                                  </div>
@@ -88,7 +88,7 @@
 
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> A new field is created in the partner view.</h3>
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> A new field is created in the partner view.</h3>
                                        <a href="https://www.odooimplementation.com/" target="_blank"><div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_6.png"> </div>
                                     </div></a>
                                  </div>
diff --git a/dynamic_product_fields/static/description/index.html b/dynamic_product_fields/static/description/index.html
index a860fd92f..6be2ebc88 100644
--- a/dynamic_product_fields/static/description/index.html
+++ b/dynamic_product_fields/static/description/index.html
@@ -7,7 +7,7 @@
       </div>
       <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
       <ul style=" padding: 0 1px; list-style: none; ">
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Creates custom fields on Products.</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Creates custom fields on Products.</li>
       </ul>
    </div>
    <div class="col-md-5 col-sm-12 col-xs-12"> <img src="images/dynamic_product_fields_2.png" class="img-responsive" alt=""> </div>
@@ -44,13 +44,13 @@
                   <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
                   <ul>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Creates custom fields on product without coding
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Creates custom fields on product without coding
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Can easily set the position of fields
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Can easily set the position of fields
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Can set the field is required or not and the type of field.
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Can set the field is required or not and the type of field.
                      </li>
                   </ul>
                </div>
@@ -65,49 +65,49 @@
                               <div class="carousel-inner">
                                  <div class="carousel-item active" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, Give Acces to the user to 'Create Fields' from User settings.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, Give Acces to the user to 'Create Fields' from User settings.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_1.png"> </div>
                                     </div>
                                  </div>
 
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Click 'Create Fields' Button to create custom fields.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Click 'Create Fields' Button to create custom fields.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_7.png"> </div>
                                     </div>
                                  </div>
 
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Fill in the details and click create fields , a new field will create.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Fill in the details and click create fields , a new field will create.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_2.png"> </div>
                                     </div>
                                  </div>
 
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                        <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">You need to select model and field type and you can set the field is required or not.</h3>
+                                        <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>You need to select model and field type and you can set the field is required or not.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_3.png"> </div>
                                     </div>
                                  </div>
 
                                   <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">You need to select the position of field.</h3>
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>You need to select the position of field.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_4.png"> </div>
                                     </div>
                                  </div>
 
                                   <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After fill the required details, click create fields to create new field.</h3>
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After fill the required details, click create fields to create new field.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_5.png"> </div>
                                     </div>
                                  </div>
 
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> A new field is created in the product view.</h3>
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> A new field is created in the product view.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/dynamic_product_fields_6.png"> </div>
                                     </div>
                                  </div>
diff --git a/inventory_barcode_scanning/static/description/index.html b/inventory_barcode_scanning/static/description/index.html
index 94ab42100..fbc4a7ccd 100644
--- a/inventory_barcode_scanning/static/description/index.html
+++ b/inventory_barcode_scanning/static/description/index.html
@@ -7,8 +7,8 @@
       </div>
       <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
       <ul style=" padding: 0 1px; list-style: none; ">
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Avoid manual entry of item count in Stock Picking.</li>
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">  Use barcode to add product. </li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Avoid manual entry of item count in Stock Picking.</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>  Use barcode to add product. </li>
       </ul>
    </div>
    <div class="col-md-5 col-sm-12 col-xs-12"> <img src="images/barcode.gif" class="img-responsive" alt=""> </div>
@@ -45,10 +45,10 @@
                   <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
                   <ul>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Avoid manual entry of item count in Stock Picking. 
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Avoid manual entry of item count in Stock Picking.
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Use barcode to add product. 
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Use barcode to add product.
                      </li>
                   </ul>
                </div>
@@ -63,10 +63,10 @@
                               <div class="carousel-inner">
                                  <div class="carousel-item active" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Enable editing mode.</h3>
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Click the field 'Barcode' and scan the Product.</h3>
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> You can see the quantity is updating automatically.</h3>
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> If no associated product is found in list then a warning will popup.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Enable editing mode.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Click the field 'Barcode' and scan the Product.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> You can see the quantity is updating automatically.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> If no associated product is found in list then a warning will popup.</h3>
                                        <ul><li>
                 							In this case you can add the product to list by clicking <q><strong>Add an Item</strong></q>
 
diff --git a/leave_sandwich_rule/static/description/index.html b/leave_sandwich_rule/static/description/index.html
index b15ceb201..22bd4af69 100644
--- a/leave_sandwich_rule/static/description/index.html
+++ b/leave_sandwich_rule/static/description/index.html
@@ -10,9 +10,9 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Sandwich rule option in employee leaves.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option to enable/disable sandwich leaves in employee settings</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option for showing sandwich leave notification.</li>    
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Sandwich rule option in employee leaves.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option to enable/disable sandwich leaves in employee settings</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option for showing sandwich leave notification.</li>
     </ul>
   </div>
   <div class="col-md-5 col-sm-12 col-xs-12"> <img src="images/sandwich_rule.gif" class="img-responsive" alt=""> </div>
@@ -62,13 +62,13 @@
           <ul>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Sandwich rule can be set on working times. </li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Sandwich rule can be set on working times. </li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">This rule can be disabled for specific employees. </li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>This rule can be disabled for specific employees. </li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option for showing sandwich leave notification, when applying leaves. </li>		  			  
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option for showing sandwich leave notification, when applying leaves. </li>
           </ul>
         </div>
 		  
@@ -86,7 +86,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, go to working time> Enable/Disable Sandwich Rule.</h3>
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, go to working time> Enable/Disable Sandwich Rule.</h3>
 			
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/sandwich_rule_1.png"> </div>
            </div>
@@ -94,7 +94,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">If you want, you can disable this feature for specific employees. Check the show notification option for getting sandwhich leave notification when applying for leaves. </h3>	
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>If you want, you can disable this feature for specific employees. Check the show notification option for getting sandwhich leave notification when applying for leaves. </h3>
 		  
     <a href="https://www.odoocustomization.com/" target="_blank"><div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/sandwich_rule_2.png"> </div></a>
           </div>
@@ -104,7 +104,7 @@
 		 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Here we can see the sandwich rule applied in leaves. </h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Here we can see the sandwich rule applied in leaves. </h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/sandwich_rule_3.png"> </div>
           </div>
diff --git a/login_signup_captcha/static/description/index.html b/login_signup_captcha/static/description/index.html
index b3cebc150..7c7b48162 100644
--- a/login_signup_captcha/static/description/index.html
+++ b/login_signup_captcha/static/description/index.html
@@ -9,18 +9,18 @@
       <ul style=" padding: 0 1px; list-style: none; ">
 
 
-<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Captcha offers safety and security.</li>
-<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Protecting Registration Forms in Websites.</li>
+<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Captcha offers safety and security.</li>
+<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Protecting Registration Forms in Websites.</li>
 
-<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Protecting registration forms in websites.</li>
+<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Protecting registration forms in websites.</li>
 
-<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Protecting login forms in websites.</li>
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Making online shopping more secure.</li>
+<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Protecting login forms in websites.</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Making online shopping more secure.</li>
 
- <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Detect abusive traffic in website without any user friction.</li>
+ <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Detect abusive traffic in website without any user friction.</li>
 
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Ease of use, effortless interaction for users.</li>
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Advanced security, state of the art spam and abuse protection for website.</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Ease of use, effortless interaction for users.</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Advanced security, state of the art spam and abuse protection for website.</li>
 
 
       </ul>
@@ -73,7 +73,7 @@
                               <div class="carousel-inner">
                                  <div class="carousel-item active" style="min-height: 0px;">
                                    <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                        Login<a href="https://www.google.com/recaptcha/admin/create" target="_blank"> here </a>  and register site domain to get your site key.</h3>
                                        </h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/request.png"> </div>
@@ -89,7 +89,7 @@
                           
                          <div class="carousel-item " style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Paste the same in data-site key attribute on xml code, all done!</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Paste the same in data-site key attribute on xml code, all done!</h3>
                                        <div style="">
                                           <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
                                                            src="images/coddd.png">
@@ -117,15 +117,15 @@
                   <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
                   <ul>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> 
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                   Registration Forms in Websites.
                      </li>
                 <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> 
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                    Forms in Websites.
                      </li>
                 <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> 
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                    Shopping More Secure.
                      </li> 
                  
@@ -142,13 +142,13 @@
                               <div class="carousel-inner">
                                  <div class="carousel-item active" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, your login/signup page</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, your login/signup page</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/screen1.png"> </div>
                                     </div>
                                  </div>
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">A captcha test to detect whether human or not </h3>
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>A captcha test to detect whether human or not </h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/screen2.png"> </div>
                                     </div>
                                  </div>
@@ -156,7 +156,7 @@
                           
                         <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After the completion of captcha</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After the completion of captcha</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/screen3.png"> </div>
                                     </div>
                                  </div>
diff --git a/paytm_payment_gateway/static/description/index.html b/paytm_payment_gateway/static/description/index.html
index 2d977a8d6..97ee6a15d 100644
--- a/paytm_payment_gateway/static/description/index.html
+++ b/paytm_payment_gateway/static/description/index.html
@@ -6,7 +6,7 @@
       </div>
       <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
       <ul style=" padding: 0 1px; list-style: none; ">
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Paytm Payment Gateway in eCommerce</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Paytm Payment Gateway in eCommerce</li>
       </ul>
    </div>
    <div class="col-md-5 col-sm-12 col-xs-12"> <img src="images/paytm.gif" class="img-responsive" alt=""> </div>
@@ -45,7 +45,7 @@
                   <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
                   <ul>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Payments via Paytm Payment Gateway 
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Payments via Paytm Payment Gateway
                      </li>
                   </ul>
                </div>
@@ -60,27 +60,27 @@
                               <div class="carousel-inner">
                                  <div class="carousel-item active" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, open Invoicing and click on Paytm.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, open Invoicing and click on Paytm.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/paytm.png"> </div>
                                     </div>
                                  </div>
                                  
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Enable the Payment Acquirer in Website . For Testing purpose you can select the state as test.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Enable the Payment Acquirer in Website . For Testing purpose you can select the state as test.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/enable.png"> </div>
                                     </div>
                                  </div>
                                  
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> At the time of check out you can choose to Pay with Paytm.</h3>
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> At the time of check out you can choose to Pay with Paytm.</h3>
                                        <a href="https://www.odooconsultant.com/" target="_blank"><div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/checkout.png"> </div></a>
                                     </div>
                                  </div>
                                    <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> The customer can fill the necessary details to pay.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> The customer can fill the necessary details to pay.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/check_out_details.png"> </div>
                                     </div>
                                  </div>
diff --git a/pos_book_order/static/description/index.html b/pos_book_order/static/description/index.html
index a6851bf4a..7fa3f3dc5 100644
--- a/pos_book_order/static/description/index.html
+++ b/pos_book_order/static/description/index.html
@@ -10,13 +10,13 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">POS booking orders for Odoo12 community edition.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Booking orders from Shop,Bar/Restaurant in POS. </li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> 'Booking' button in POS.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Available both pickup and delivery options.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> 'Booked Order' button in POS.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Manage booked orders from POS.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Shows booked order details in order receipt and order.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>POS booking orders for Odoo12 community edition.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Booking orders from Shop,Bar/Restaurant in POS. </li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> 'Booking' button in POS.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Available both pickup and delivery options.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> 'Booked Order' button in POS.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Manage booked orders from POS.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Shows booked order details in order receipt and order.</li>
     </ul>
     
   </div>
@@ -67,18 +67,18 @@
           <ul>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Available in Odoo 12.0 community edition. </li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Available in Odoo 12.0 community edition. </li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Create booking orders from POS. </li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Create booking orders from POS. </li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">User can choose pickup or deliver option. </li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>User can choose pickup or deliver option. </li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">List all booked orders in POS screen. </li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>List all booked orders in POS screen. </li>
 			<li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Shows booking reference,contact number,order note, pickup/delivery date and delivery address in the order receipt. </li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Shows booking reference,contact number,order note, pickup/delivery date and delivery address in the order receipt. </li>
 			  
           </ul>
         </div>
@@ -97,7 +97,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation,open POS window and go to settings of POS session > Enable/Disable Booking Order.</h3>
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation,open POS window and go to settings of POS session > Enable/Disable Booking Order.</h3>
 			
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_book_order-1.png"> </div>
            </div>
@@ -105,7 +105,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Start a new session.  </h3>	
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Start a new session.  </h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_book_order-2.png"> </div>
           </div>
@@ -115,7 +115,7 @@
 		 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">In order to create a booking order,you have to select customer.In the absence,it will raise an alert popup. </h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>In order to create a booking order,you have to select customer.In the absence,it will raise an alert popup. </h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_book_order-3.png"> </div>
           </div>
@@ -124,7 +124,7 @@
 		 
 	<div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">In order to create a booking order,you have to add products in the Order line. In the absence,it will raise an alert popup with invalid order line.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>In order to create a booking order,you have to add products in the Order line. In the absence,it will raise an alert popup with invalid order line.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_book_order-4.png"> </div>
            </div>
@@ -134,7 +134,7 @@
  <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">After successfully adding both, booking button gets highlighted, indicating its ready for booking. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>After successfully adding both, booking button gets highlighted, indicating its ready for booking. </h3>
 		   
           <div style="">
 			  
@@ -145,7 +145,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Upon clicking on booking button it will raise a popup window with details of the selected order.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Upon clicking on booking button it will raise a popup window with details of the selected order.</h3>
 		   
           <div style="">
 			  
@@ -156,7 +156,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Upon selecting the pickup option, it shows a field to enter pickup date. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Upon selecting the pickup option, it shows a field to enter pickup date. </h3>
 		   
           <div style="">
 			  
@@ -167,7 +167,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">When selected deliver option, it displays two fields to enter delivery date and delivery address.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>When selected deliver option, it displays two fields to enter delivery date and delivery address.</h3>
 		   
           <div style="">
 			  
@@ -178,7 +178,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">After, confirm pickup/deliver order,the orders get listed under the booked order button.User can confirm the order by clicking on confirm POS order button. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>After, confirm pickup/deliver order,the orders get listed under the booked order button.User can confirm the order by clicking on confirm POS order button. </h3>
 		   
           <div style="">
 			  
@@ -189,7 +189,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Upon clicking the Pickup orders button, it enlists all pickup orders. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Upon clicking the Pickup orders button, it enlists all pickup orders. </h3>
 		   
           <div style="">
 			  
@@ -200,7 +200,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Under Delivery orders button, it enlists all available delivery orders.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Under Delivery orders button, it enlists all available delivery orders.</h3>
 		   
           <div style="">
 			  
@@ -211,7 +211,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">On confirming POS order, you can view the order lines and customer assigned with order details.Later can do the payment. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>On confirming POS order, you can view the order lines and customer assigned with order details.Later can do the payment. </h3>
 		   
           <div style="">
 			  
@@ -222,7 +222,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">In the case of picking order,the order receipt will be shown as below,</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>In the case of picking order,the order receipt will be shown as below,</h3>
 		   
           <div style="">
 			  
@@ -233,7 +233,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">And in the case of delivery order,the order receipt will be shown as below, </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>And in the case of delivery order,the order receipt will be shown as below, </h3>
 		   
           <div style="">
 			  
@@ -244,7 +244,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">The confirmed orders get disappeared from the booked orders list in POS session.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>The confirmed orders get disappeared from the booked orders list in POS session.</h3>
 		   
           <div style="">
 			  
@@ -255,7 +255,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">In the backend, all draft orders are visible in red color and confirmed orders are in green color.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>In the backend, all draft orders are visible in red color and confirmed orders are in green color.</h3>
 		   
           <div style="">
 			  
@@ -266,7 +266,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">For instance, draft order form will be like below. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>For instance, draft order form will be like below. </h3>
 		   
           <div style="">
 			  
@@ -277,7 +277,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">For instance, confirmed order form will be like below. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>For instance, confirmed order form will be like below. </h3>
 		   
           <div style="">
 			  
@@ -288,7 +288,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">POS Order with booking reference. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>POS Order with booking reference. </h3>
 		   
           <div style="">
 			  
diff --git a/pos_multi_note/static/description/index.html b/pos_multi_note/static/description/index.html
index b15706626..274034901 100644
--- a/pos_multi_note/static/description/index.html
+++ b/pos_multi_note/static/description/index.html
@@ -10,16 +10,16 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">  Create Multiple Order notes in the backend.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>  Create Multiple Order notes in the backend.</li>
     </ul>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">  Can select order notes created in the backend from POS interface.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>  Can select order notes created in the backend from POS interface.</li>
     </ul>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">   Option for typing required order notes along with the selection.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>   Option for typing required order notes along with the selection.</li>
     </ul>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">  The order notes defined will appear in the pos ticket.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>  The order notes defined will appear in the pos ticket.</li>
     </ul>
   </div>
   <div class="col-md-5 col-sm-12 col-xs-12"> <img src="multi-order-note.gif" class="img-responsive" alt=""> </div>
@@ -69,10 +69,10 @@
           <ul>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Available in Odoo 12.0 community edition. </li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Available in Odoo 12.0 community edition. </li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Allow to add multiple order notes in pos order lines.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Allow to add multiple order notes in pos order lines.</li>
           </ul>
         </div>
 		  
@@ -90,7 +90,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Install Multiple Orderline Notes In POS from the Apps menu.</h3>
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Install Multiple Orderline Notes In POS from the Apps menu.</h3>
 			
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="pos_note_01.png"> </div>
            </div>
@@ -98,7 +98,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Go to Point of Sale->Configuration->Point of sale, select the required
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Go to Point of Sale->Configuration->Point of sale, select the required
 		point of sale and enable the button Order line note. </h3>	
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="pos_note_02.png"> </div>
@@ -109,7 +109,7 @@
 		 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Under configuration menu, we can see the option POS Order notes. Upon clicking it, this will lead to a page of creating multi order notes. </h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Under configuration menu, we can see the option POS Order notes. Upon clicking it, this will lead to a page of creating multi order notes. </h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="pos_note_03.png"> </div>
           </div>
@@ -118,7 +118,7 @@
 		 
 	<div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">FFrom here we can add or remove the order notes. The order notes created from here will appear in the frontend of POS.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>FFrom here we can add or remove the order notes. The order notes created from here will appear in the frontend of POS.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="pos_note_04.png"> </div>
            </div>
@@ -126,7 +126,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">By opening a session we can see a new button Multi Notes ,we can use this 
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>By opening a session we can see a new button Multi Notes ,we can use this
 		  button after selecting a product in the order line.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="pos_note_05.png"> </div>
@@ -135,7 +135,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">By clicking on the button, a popup arrives which displays order notes created in the backend. One can select them for the required order line and also can type new order note in the text area.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>By clicking on the button, a popup arrives which displays order notes created in the backend. One can select them for the required order line and also can type new order note in the text area.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="pos_note_06.png"> </div>
            </div>
@@ -143,7 +143,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Selected notes will appear in the corresponding order line.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Selected notes will appear in the corresponding order line.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="pos_note_07.png"> </div>
            </div>
@@ -151,7 +151,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">By generating the pos ticket, the order notes that we selected will appear in the bill alongside the products.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>By generating the pos ticket, the order notes that we selected will appear in the bill alongside the products.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="pos_note_08.png"> </div>
            </div>
diff --git a/pos_multi_variant/static/description/index.html b/pos_multi_variant/static/description/index.html
index 0384e0387..9bc10befe 100644
--- a/pos_multi_variant/static/description/index.html
+++ b/pos_multi_variant/static/description/index.html
@@ -10,12 +10,12 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Multi-variant option in product configuration.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option for adding extra price for the variant.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option for activating/inactivating variant types in POS.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Notification for multi-variant products in POS.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Easy selection of variant type from Wizard.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Displays variant details in order receipt and order.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Multi-variant option in product configuration.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option for adding extra price for the variant.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option for activating/inactivating variant types in POS.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Notification for multi-variant products in POS.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Easy selection of variant type from Wizard.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Displays variant details in order receipt and order.</li>
     </ul>
     
   </div>
@@ -66,22 +66,22 @@
           <ul>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Multi-variant option in product configuration.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Multi-variant option in product configuration.</li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option for adding extra price for the variant.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option for adding extra price for the variant.</li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option for activating/inactivating variant types in POS.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option for activating/inactivating variant types in POS.</li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Notification for multi-variant products in POS.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Notification for multi-variant products in POS.</li>
 
 			<li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Easy selection of variant type from wizard.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Easy selection of variant type from wizard.</li>
 
 			<li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Displays variant details in order receipt and order.</li>	  
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Displays variant details in order receipt and order.</li>
           </ul>
         </div>
 		  
@@ -99,7 +99,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, go to Products > Enable POS variants option.</h3>
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, go to Products > Enable POS variants option.</h3>
 			
       <a href="https://www.hireodoodevelopers.com/" target="_blank"><div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_multivariant-1.png"> </div>
            </div>
@@ -107,7 +107,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Configure variants.</h3>	
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Configure variants.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_multivariant-2.png"> </div>
           </div>
@@ -117,7 +117,7 @@
 		 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Open the POS session, you can see the product with multi-variants.</h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Open the POS session, you can see the product with multi-variants.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_multivariant-3.png"> </div>
           </div>
@@ -126,7 +126,7 @@
 		 
 	<div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Variant selection window pop-ups, upon selecting a product having multi-variants.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Variant selection window pop-ups, upon selecting a product having multi-variants.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_multivariant-4.png"> </div>
            </div>
@@ -136,7 +136,7 @@
  <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Choose required variants of the product.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Choose required variants of the product.</h3>
 		   
           <div style="">
 			  
@@ -147,7 +147,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">On confirming the variants, it gets listed in the order list of POS session.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>On confirming the variants, it gets listed in the order list of POS session.</h3>
 		   
           <div style="">
 			  
@@ -158,7 +158,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">The order receipt will be shown as below,</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>The order receipt will be shown as below,</h3>
 		   
           <div style="">
 			  
diff --git a/pos_waiter/static/description/index.html b/pos_waiter/static/description/index.html
index bd502cf77..8d1e44248 100644
--- a/pos_waiter/static/description/index.html
+++ b/pos_waiter/static/description/index.html
@@ -10,10 +10,10 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">The waiter selection can be enable/disable from point of sale settings.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Selected waiter will highlighted in pos ticket and order.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option for distinguish normal employees and waiters.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Date wise report which shows the amount of sales carried by each waiters.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>The waiter selection can be enable/disable from point of sale settings.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Selected waiter will highlighted in pos ticket and order.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option for distinguish normal employees and waiters.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Date wise report which shows the amount of sales carried by each waiters.</li>
     </ul>
     
   </div>
@@ -65,16 +65,16 @@
           <ul>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">The waiter selection can be enable/disable from point of sale settings.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>The waiter selection can be enable/disable from point of sale settings.</li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Selected waiter will highlighted in pos ticket and order.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Selected waiter will highlighted in pos ticket and order.</li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option to distinguish normal employees and waiters.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option to distinguish normal employees and waiters.</li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Date wise report which shows the amount of sales carried by each waiters.</li>  
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Date wise report which shows the amount of sales carried by each waiters.</li>
           </ul>
         </div>
 		  
@@ -92,7 +92,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, go to Point of sale > Enable Waiter Selection.</h3>
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, go to Point of sale > Enable Waiter Selection.</h3>
 			
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_waiter_01.png"> </div>
            </div>
@@ -100,7 +100,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Move to employee form select the employee which we want to make as a waiter
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Move to employee form select the employee which we want to make as a waiter
     for that enable the field "Is a waiter"</h3>	
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_waiter_02.png"> </div>
@@ -111,7 +111,7 @@
 		 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Open the POS session, we can see there will be button named "Add Waiter"
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Open the POS session, we can see there will be button named "Add Waiter"
        by click on the button we can see the option for selecting the waiters.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_waiter_03.png"> </div>
@@ -121,7 +121,7 @@
 		 
 	<div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">From this pop up window we can select our required waiters.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>From this pop up window we can select our required waiters.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/pos_waiter_04.png"> </div>
            </div>
@@ -131,7 +131,7 @@
  <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">After the order confirmation, while printing the ticket the corresponding
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>After the order confirmation, while printing the ticket the corresponding
        waiter will highlighted there.</h3>
 		   
           <div style="">
@@ -143,7 +143,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">When we moves to backend pos orders we can see 
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>When we moves to backend pos orders we can see
        waiter will highlighted there.</h3>
 		   
           <div style="">
@@ -155,7 +155,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">For analysing the performance of the waiter, the report wizard can be find 
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>For analysing the performance of the waiter, the report wizard can be find
         under the menu Reporting->Waiter Performance Report</h3>
 		   
           <div style="">
@@ -167,7 +167,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
       
-       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">In the wizard we have to specify the period of the report by selecting 
+       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>In the wizard we have to specify the period of the report by selecting
        start date and end date</h3>
        
           <div style="">
@@ -179,7 +179,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
       
-       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Below shows a sample report of performance analysis</h3>
+       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Below shows a sample report of performance analysis</h3>
        
           <div style="">
         
diff --git a/print_voucher_receipts/static/description/index.html b/print_voucher_receipts/static/description/index.html
index 3dfdb775b..90e2be4af 100644
--- a/print_voucher_receipts/static/description/index.html
+++ b/print_voucher_receipts/static/description/index.html
@@ -10,9 +10,9 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Payment/Receipt voucher print for Odoo12 community edition.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Print customer payment voucher receipts.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Print vendor voucher receipts.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Payment/Receipt voucher print for Odoo12 community edition.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Print customer payment voucher receipts.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Print vendor voucher receipts.</li>
     </ul>
     
   </div>
@@ -62,12 +62,12 @@
           <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">		  
           <ul>
           	<li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Payment/Receipt voucher print for Odoo12 community edition.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Payment/Receipt voucher print for Odoo12 community edition.</li>
 			<li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Print customer payment voucher receipts.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Print customer payment voucher receipts.</li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Print vendor voucher receipts.</li>	  
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Print vendor voucher receipts.</li>
           </ul>
         </div>
 		  
@@ -85,7 +85,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, go to Customers > Receipts for printing customer payment voucher receipt.</h3>
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, go to Customers > Receipts for printing customer payment voucher receipt.</h3>
 			
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/print_voucher_receipts-1.png"> </div>
            </div>
@@ -93,7 +93,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Choose one receipt that you want to print and click on the print button.</h3>	
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Choose one receipt that you want to print and click on the print button.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/print_voucher_receipts-2.png"> </div>
           </div>
@@ -103,7 +103,7 @@
 		 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Print voucher receipt.</h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Print voucher receipt.</h3>
 		  
       <a href="https://www.odooconsultant.com/" target="_blank"><div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/print_voucher_receipts-3.png"> </div></a>
           </div>
@@ -112,7 +112,7 @@
 		 
 	<div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">For vendor payment voucher receipt print, go to Vendors > Receipts</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>For vendor payment voucher receipt print, go to Vendors > Receipts</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/print_voucher_receipts-4.png"> </div>
            </div>
@@ -122,7 +122,7 @@
  <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Choose one receipt that you want to print and click on the print button.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Choose one receipt that you want to print and click on the print button.</h3>
 		   
           <div style="">
 			  
@@ -133,7 +133,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Print voucher receipts.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Print voucher receipts.</h3>
 		   
           <div style="">
 			  
diff --git a/product_catalogue/static/description/index.html b/product_catalogue/static/description/index.html
index 20b608c92..782c1be37 100644
--- a/product_catalogue/static/description/index.html
+++ b/product_catalogue/static/description/index.html
@@ -10,7 +10,7 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">  Enables the option to print single/multi product catalogue.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>  Enables the option to print single/multi product catalogue.</li>
     </ul>
   </div>
   <div class="col-md-5 col-sm-12 col-xs-12"> <img src="Product_catalogue.gif" class="img-responsive" alt=""> </div>
@@ -60,10 +60,10 @@
           <ul>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Available in Odoo 12.0 community edition. </li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Available in Odoo 12.0 community edition. </li>
 			  
             <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-			<img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Option to print the catalogue of single/multi products.</li>
+			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Option to print the catalogue of single/multi products.</li>
           </ul>
         </div>
 		  
@@ -81,7 +81,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> List of products in the inventory.</h3>
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> List of products in the inventory.</h3>
 			
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="product-catalog-1.png"> </div>
            </div>
@@ -89,7 +89,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Printing option for getting the Product Catalogue from the product form. </h3>	
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Printing option for getting the Product Catalogue from the product form. </h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="product-catalog-2.png"> </div>
           </div>
@@ -99,7 +99,7 @@
 		 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Report view after printing the catalogue of a single product. </h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Report view after printing the catalogue of a single product. </h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="product-catalog-3.png"> </div>
           </div>
@@ -108,7 +108,7 @@
 		 
 	<div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Select multiple products from the inventory.</h3>
+		  <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Select multiple products from the inventory.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="product-catalog-4.png"> </div>
            </div>
@@ -118,7 +118,7 @@
  <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 		  
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Report view after printing the catalogue of more than one product. </h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Report view after printing the catalogue of more than one product. </h3>
 		   
           <div style="">
 			  
@@ -131,7 +131,7 @@
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
       
-       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Module also enables the option for print the catalogue of a product
+       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Module also enables the option for print the catalogue of a product
        from the e-commerce site by clicking on the button "Print Catalogue". </h3>
        
           <div style="">
diff --git a/sales_care_of_commission/static/description/index.html b/sales_care_of_commission/static/description/index.html
index 75448b397..661faaf6f 100644
--- a/sales_care_of_commission/static/description/index.html
+++ b/sales_care_of_commission/static/description/index.html
@@ -10,16 +10,16 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Commission based on a percentage of the amount of the sale.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Commission based on a percentage of the amount of the sale.</li>
     </ul>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Shows the total commission amount from partner form.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Shows the total commission amount from partner form.</li>
     </ul>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Shows the commission amount & percentage in invoices analysis pivot view.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Shows the commission amount & percentage in invoices analysis pivot view.</li>
     </ul>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Print C/O partner pdf report.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Print C/O partner pdf report.</li>
     </ul>
     
   </div>
@@ -71,7 +71,7 @@
 	 <div class="carousel-inner">
       <div class="carousel-item active" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, from Sales > Configuration > Settings > Quotations & Orders, you can set default C/O commission percentage.
+			<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, from Sales > Configuration > Settings > Quotations & Orders, you can set default C/O commission percentage.
 </h3>
 			
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/sales_care_of_commission-1.png"> </div>
@@ -80,7 +80,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
         <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Choose one Care of Partner from contact and set default commission percentage or,</h3>
+		<h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Choose one Care of Partner from contact and set default commission percentage or,</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/sales_care_of_commission-2.png"> </div>
           </div>
@@ -90,7 +90,7 @@
 		 
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;"> 
-		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Possible to change/set the default Care of Partner for a customer from sale order before confirming the order.</h3>
+		  <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Possible to change/set the default Care of Partner for a customer from sale order before confirming the order.</h3>
 		  
           <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/sales_care_of_commission-3.png"> </div>
           </div>
@@ -100,7 +100,7 @@
      <div class="carousel-item" style="min-height: 0px;">
            <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
 
-               <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Possible to change/set the default Care of Partner for a customer from Invoice before validation.</h3>
+               <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Possible to change/set the default Care of Partner for a customer from Invoice before validation.</h3>
 
               <div style="">
 
@@ -110,7 +110,7 @@
       </div>
       <div class="carousel-item" style="min-height: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Print the Care of Partner report.</h3>
+		   <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Print the Care of Partner report.</h3>
           <div style="">
 			<img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/sales_care_of_commission-5.png"> </div>
           </div>
diff --git a/website_maintenance_hr/static/description/index.html b/website_maintenance_hr/static/description/index.html
index a1f06da99..35e701adc 100644
--- a/website_maintenance_hr/static/description/index.html
+++ b/website_maintenance_hr/static/description/index.html
@@ -7,7 +7,7 @@
       </div>
       <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
       <ul style=" padding: 0 1px; list-style: none; ">
-         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Creates Maintenance Request from Website.</li>
+         <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Creates Maintenance Request from Website.</li>
       </ul>
    </div>
    <div class="col-md-5 col-sm-12 col-xs-12"> <img src="images/website.gif" class="img-responsive" alt=""> </div>
@@ -44,13 +44,13 @@
                   <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
                   <ul>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Request Equipment Maintenance from Website.
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Request Equipment Maintenance from Website.
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Automatically creates Maintenance Request in backend.
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Automatically creates Maintenance Request in backend.
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Sends e-mail of Maintenance Request details to employee.
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Sends e-mail of Maintenance Request details to employee.
                      </li>
                   </ul>
                </div>
@@ -65,35 +65,35 @@
                               <div class="carousel-inner">
                                  <div class="carousel-item active" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> After installation, just click on the maintenance menu on your website.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> After installation, just click on the maintenance menu on your website.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/website_maintenance_hr_1.png"> </div>
                                     </div>
                                  </div>
 
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Fill in the details and click submit, you will be redirected to this page.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Fill in the details and click submit, you will be redirected to this page.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/website_maintenance_hr_2.png"> </div>
                                     </div>
                                  </div>
 
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                        <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> An e-mail will be sent to your work e-mail regarding the maintenance request details.</h3>
+                                        <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> An e-mail will be sent to your work e-mail regarding the maintenance request details.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/website_maintenance_hr_3.png"> </div>
                                     </div>
                                  </div>
 
                                   <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> The request you sent will be created under new requests in maintenance module.</h3>
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> The request you sent will be created under new requests in maintenance module.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/website_maintenance_hr_4.png"> </div>
                                     </div>
                                  </div>
 
                                   <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> The maintenance request will be created under your name.</h3>
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> The maintenance request will be created under your name.</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/website_maintenance_hr_5.png"> </div>
                                     </div>
                                  </div>
diff --git a/xe_currency_converter/static/description/index.html b/xe_currency_converter/static/description/index.html
index 13b41b00d..6ff931d7d 100644
--- a/xe_currency_converter/static/description/index.html
+++ b/xe_currency_converter/static/description/index.html
@@ -19,11 +19,11 @@
          </div>
          <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
              <ul style=" padding: 0 1px; list-style: none; ">
-                 <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Currency converter for Odoo12 community edition.</li>
-		 <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Convert 180+ currencies.</li>
-		<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Get accurate currency rates for every world currency.</li>
-		<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Globally trusted exchange rates of currency.</li>
-		<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Daily / Live rates.</li>
+                 <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Currency converter for Odoo12 community edition.</li>
+		 <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Convert 180+ currencies.</li>
+		<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Get accurate currency rates for every world currency.</li>
+		<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Globally trusted exchange rates of currency.</li>
+		<li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Daily / Live rates.</li>
              </ul>
          <div style=" text-align: left; ">
              <!-- <a href="" style="display: -webkit-inline-box;display: -webkit-inline-flex;display: -ms-inline-flexbox; display: inline-flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center; -webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;padding: 0 30px;font-size: 15px;height: 56px;text-transform: uppercase;border: 1px solid #f21692;color: #000;border-radius: 50px;text-decoration: none;letter-spacing: 1px;"><i class="fa fa-laptop" aria-hidden="true" style="margin-right: 5px;"></i> Live Demo</a> -->