<div id="fullscreen-demo">
  <span id="fullscreen-button" class="link fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-expand fa-stack-1x hidden-fullscreen"></i>
    <i class="fa fa-compress fa-stack-1x visible-fullscreen"></i>
  </span>
</div>

.visible-fullscreen {
  display: none;
}

:fullscreen .visible-fullscreen {
  display: inline-block;
}
:fullscreen .hidden-fullscreen {
  display: none;
}

/* extra crap */
.link {
  cursor: pointer;
}

$('#fullscreen-button').click(function() {
  var el = document.getElementById('fullscreen-demo');
	
  if (document.isFullscreen
      || document.webkitIsFullScreen
      || document.mozIsFullScreen
      || document.msIsFullscreen) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozExitFullScreen) {
      document.mozExitFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    if (el.requestFullscreen) {
      el.requestFullscreen();
    } else if (el.webkitRequestFullscreen) {
      el.webkitRequestFullscreen();
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen();
    } else if (el.msRequestFullscreen) {
      el.msRequestFullscreen();
    }
  }
});