[UPDT] Index Updated

4 years ago · 372bd75217
19 changed files with 222 additions and 226 deletions
--- 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"
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                                             style=" width: 22px; margin-right: 6px; " alt="check">
                                                        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"
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                                             style=" width: 22px; margin-right: 6px; " alt="check">
                                                        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"
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>You
                                                             style=" width: 22px; margin-right: 6px; " alt="check">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"
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                                             style=" width: 22px; margin-right: 6px; " alt="check">
                                                        Now you can check the journal entries of that particular invoice.
                                                        You can see the debit amount and the due dates.
                                                    </h3>
--- 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;"><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;"><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> 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>
--- 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;"><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;"><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;"><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;"><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>  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="">
--- 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>
--- 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>
--- 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>
--- 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;"><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;"><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>  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;"> <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;"> <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;"> <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;"> <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;"> <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;"> <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> 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>
--- 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;"><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;"><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;"><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;"><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>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>
--- 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;"><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;"><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 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;"><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;"><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>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;"><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;"><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>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>
--- 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>
--- 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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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> 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="">
--- 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>
--- 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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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> 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="">
--- 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;"><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;"><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;"><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;"><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;"><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;"><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> 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="">
--- 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;"><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;"><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;"><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;"><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>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="">
--- 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="">
--- 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>
--- 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>
--- 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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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> 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> -->