diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 35c067445..6a12477eb 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -337,17 +337,17 @@
 
 .debate-show, .proposal-show {
 
-  .social-share-full .social-share-button{
+  .social-share-full .social-share-button {
     display:inline;
   }
 
-  .whatsapp:before{
-    vertical-align: 10px;
-    margin-left: 0.5px;
-    color: white;
+  .whatsapp:before {
     background-color: #43d854;
-    padding: 9.5px 9.8px 9.5px 9.8px;
+    color: white;
     font-size: 1.7em;
+    margin-left: rem-calc(0.5);
+    padding: rem-calc(9.5) rem-calc(9.8);
+    vertical-align: rem-calc(10);
   }
 
 
diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb
index 5bef1f745..941530e58 100644
--- a/app/views/debates/show.html.erb
+++ b/app/views/debates/show.html.erb
@@ -58,7 +58,7 @@
           <%= social_share_button_tag(@debate.title) %>
           <% if browser.mobile? %>
             <a href="whatsapp://send?text=<%= @debate.title %> <%= debate_url(@debate) %>" data-action="share/whatsapp/share">
-              <i class="icon-whatsapp whatsapp"></i>
+              <span class="icon-whatsapp whatsapp"></span>
             </a>
           <% end %>
         </div>
diff --git a/app/views/proposals/show.html.erb b/app/views/proposals/show.html.erb
index b44496c55..5231439be 100644
--- a/app/views/proposals/show.html.erb
+++ b/app/views/proposals/show.html.erb
@@ -90,7 +90,7 @@
           <%= social_share_button_tag(@proposal.title) %>
           <% if browser.mobile? %>
             <a href="whatsapp://send?text=<%= @proposal.title %> <%= proposal_url(@proposal) %>" data-action="share/whatsapp/share">
-              <i class="icon-whatsapp whatsapp"></i>
+              <span class="icon-whatsapp whatsapp"></span>
             </a>
           <% end %>
         </div>