Font Awesome

Currently using webfont version as the JS version doesn't have a NPM package.
All icons can be found on https://fontawesome.com/icons
Use it like for example <i class="fas fa-camera-retro"></i>. You can also use it inside buttons.

fa-shield-alt

Nice Stuff

Show Code

<div class="row text-center mt-3">
  <div class="col-sm-3 mb-3">
    <i class="fas fa-shield-alt fa-spin"></i>
    <i class="fas fa-shield-alt fa-pulse"></i>
  </div>

  <div class="col-sm-3 mb-3">
    <i class="fas fa-shield-alt"></i>
    <i class="fas fa-shield-alt fa-rotate-90"></i>
    <i class="fas fa-shield-alt fa-rotate-180"></i>
    <i class="fas fa-shield-alt fa-rotate-270"></i>
    <i class="fas fa-shield-alt fa-flip-horizontal"></i>
    <i class="fas fa-shield-alt fa-flip-vertical"></i>
  </div>

  <div class="col-sm-3 mb-3">
   <span class="fa-stack">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
  </span>
  </div>
</div>

PhotoSwipe

The Documentation of this plugin can be found here: http://photoswipe.com/documentation/getting-started.html

You should try to add the size of the image with data-size="100x100". If you don't add a size the size will be added via JS, but the show animation will look as good.

Show Code

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="http://via.placeholder.com/3000x2000" itemprop="contentUrl">
      <img src="http://via.placeholder.com/300x200" itemprop="thumbnail" alt="Image description"/>
    </a>
    <figcaption itemprop="caption description">Image caption</figcaption>
  </figure>

  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="http://via.placeholder.com/3500x1500" itemprop="contentUrl" data-size="3500x1500">
      <img src="http://via.placeholder.com/350x150" itemprop="thumbnail" alt="Image description"/>
    </a>
    <figcaption itemprop="caption description">Image caption</figcaption>
  </figure>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    pandoPhotoSwipe(document.querySelectorAll('.my-gallery'))
  });
</script>

//add this to the dom befor the </body>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="pswp__bg"></div>
  <div class="pswp__scroll-wrap">
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <button class="pswp__button pswp__button--share" title="Share"></button>
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>
    </div>
  </div>
</div>