my structure header

<li><a title="About" href="<?php bloginfo('url') ?>/about">About<i class="about"></i></a></li> 
<li><a title="Blog" href="<?php bloginfo('url') ?>/blog">Blog<i class="blog"></i></a></li>

function

<?php
register_nav_menus(
    array('primary-menu' => 'Header Menu')
)
?>

my css

#menu-pr ul li a i {
  left: 50%;
  margin: -8px 0 0 -11px;
  position: absolute;
  text-indent: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  background-image: url(assets/img/sprite-menu.svg);
  background-repeat: no-repeat;
}

.no-svg #menu-pr ul li a i {
  background-image: url(assets/img/sprite-menu.png);
}

#menu-pr ul li a i.contact {
  background-position: 0 0;
}

#menu-pr ul li a i.blog {
  background-position: 0 -16px;
}

#menu-pr ul li a i.about {
  background-position: 0 -32px;
}

how to fix this

my header wordpress menu

<?php
wp_nav_menu (array(
   'theme_location' => 'primary-menu'
))
?>

html tag not generate i class for this

after im add link_before

<?php
    wp_nav_menu (array(
       'theme_location' => 'primary-menu',
       'link_before' => '<i class="icon"></i>'
    ))
    ?>

that its, all icon same. any one can help me out.