Adjust copy button

Change to clipboard icon.
Position right and top of code blocks.

template/pagetype-doc.html.jinja

@@ -15,12 +15,21 @@
             new ClipboardJS('.clipboard-btn');
         });
     </script>
-    {# temp styling for testing. Need to cleanup #}
+    {# temp styling for testing. #}
     <style>
       .clipboard-btn {
-        position: absolute;
-        right: 50px;
+        position: relative;
+        float: right;
+        z-index: 10;
       }
+      .multicode .clipboard-btn {
+        right: 15px;
+        top: 55px;
+      }
+      .js_interactive .clipboard-btn {
+        display:none;
+      }
+
     </style>
 
 {% endblock %}

tool/filter_copy_code_to_clipboard.py

@@ -31,9 +31,12 @@ def filter_soup(soup, **kwargs):
         codeBlock["id"] = codeBlock_id
         # Add copy button
         new_tag = soup.new_tag('button', id=codeBlock_id+'button')
-        new_tag.append("Copy to clipboard") #TODO: localize 
+        icon = soup.new_tag('i')
+        icon['class'] = "fa fa-clipboard"
         new_tag['class'] = "clipboard-btn"
+        new_tag['alt'] = "Copy to clipboard"
         new_tag['data-clipboard-target'] = "#"+codeBlock_id
+        new_tag.insert(0, icon)
         code_block.insert(0, new_tag)
         # 
         index1 += 1