Cacher is the code snippet organizer for pro developers

<?php 

$defaults = array(
	'before'    => '<nav class="navigation pagination" role="navigation"><ul class="page-numbers"><li>',
	'after'     => '</li></ul>',
	'separator' => '</li><li>',
	'pagelink'  => '<span>%</span>',
	'echo'      => 1
);

wp_link_pages( $defaults );

<?php

$args = array(
    'type' => 'list',
    'prev_text' => '<span aria-hidden="true"><i class="fa fa-angle-left"></i></span>',
    'next_text' => '<span aria-hidden="true"><i class="fa fa-angle-right"></i></span>',
);

the_posts_pagination( $args );

// change variables with your own variables/colors
.navigation {
  text-align: center;
  margin: 40px 0 0;

  .screen-reader-text {
    display: none;
  }

  .page-numbers {
    margin: 0;

    .fa {
      font-size: 18px;
      position: relative;
      top: 2px;
    }

    .label{
      width: 85px;

      span{
        display: inline-block;
        vertical-align: middle;
      }

      .fa-angle-left{
        margin-right: 5px;
      }

      .fa-angle-right{
        margin-left: 5px;
      }
    }

    > li {

      > a,
      > span {
        padding: $padding-base-vertical 0;
        min-width: 43px;
        text-align: center;
        margin-left: 10px;
        margin-top: 10px;

        &:hover,
        &.current {
          background-color: $link-hover-color;
          border-color: $link-hover-color;
          color: #fff;
        }
      }

      > span {
        background-color: $link-hover-color;
        border-color: $link-hover-color;
        color: #fff;
      }
    }
  }

}