CodePen

HTML

            
              <link href="http://get.pictos.cc/fonts/3562/2" rel="stylesheet" type="text/css">
<nav>	
	<a data-icon="E" href="#">Archive</a>
	<a data-icon="F" href="#">Claims Logon Information</a>
	<a data-icon="E" href="#">Contacts Database</a>
</nav>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              nav a {
  display: block;
  font-weight: 300;
  line-height: 20px;
  color: #4F1ACB;
  text-decoration: none;
  border: 1px solid #E5E5E5;
  margin: 0 0 -1px;
  padding: 8px 16px;
}
[data-icon]:before {
   display:inline-block;
   text-align:center;
  font-family: 'Pictos Custom';
  content: attr(data-icon);
  font-size: 14px;
  font-size: 1.4rem;
  width: 30px;
  padding-right: 10px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................