<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class='bold'>Incorrect shadow</div></br>
<div>
<span class="fa-stack fa-3x">
<i id='blah' class="fa fa-circle-o fa-stack-2x"></i>
<strong class="fa-stack-1x">1</strong>
</span>
</div>
</br>
<div class='bold'>Produces an Oval - Not a Circle</div>
</br>
<div class="icon-wrapper">
<i class="fa page-number-core page-number-dark">
<span class="page-number-text page-number-text-light">1</span>
</i>
</div>
<br/><br/>
<div class='bold'>Produces an Circle with Shadow but - Not a Circle</div>
</br>
<div class="icon-wrapper">
<i class="fa fa-comment page-number-core page-number-dark">
<span class="page-number-text page-number-text-light fix-editor"> </span>
</i>
</div>
</br><div>
<a href="http://codepen.io/Onomicon/pen/iDfld">Source of Circle with Shadow</a>
</div>
</body>
</html>
// Code goes here
/* Styles go here */
#blah{
box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
}
.icon-wrapper {
display: inline-block;
}
.page-number-core {
border: 3px solid #fff;
padding: 10px;
-webkit-border-radius: 1100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
text-align: center;
display: table-cell;
vertical-align: middle;
}
.fix-editor {
display: none;
}
.bold{
font-weight: bold;
}