Font Awesome

Pretty amazing!

How to add some Icons in v4.

to add style, include in the head:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Usage: note it is version-specific

Available versions

This is a copy icon .

This is a check icon .

More icons.

Use in a regular button:

Use in a copy-to-clipboard button:

This JavaScript code enumerates all the code snippets and adds a copy to clipboard button:

var codeBlocks = document.querySelectorAll('pre.highlight');
codeBlocks.forEach(function(codeBlock) {
  var copyButton = document.createElement('button');
  copyButton.className = 'copy-to-clipboard';
  copyButton.type = 'button';
  var copyHtml = '<i class="fa fa-copy" aria-hidden="true"></i>';
  copyButton.innerHTML = copyHtml;
  codeBlock.append(copyButton);

  copyButton.addEventListener('click', function () {
    var code = codeBlock.querySelector('code').innerText.trim();
    window.navigator.clipboard.writeText(code);
    copyButton.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>';
    var fourSeconds = 4000;
    setTimeout(function () {
        copyButton.innerHTML = copyHtml;
      }, fourSeconds);
  });
});

Note:

• to use font awesome I have to work with innerHTML button attribute;
• click handler, besides copying the code to the clipboard, temporarily changes the button text to provide feedback.