How to make this icon easily resizable/responsive in css3? - css

Question

I want to make the following icon in CSS3 such that I can very the width and height of only ".circle" (or some other wrapper element, point is I want to adjust width and height in one place or even make it so that it automatically fits in any container regardless of width and height) without having to adjust any other CSS3 properties to make the "A" line up in the center.
What is the best way to do this? If you can recommend a better way to do the following it would be very appreciated. The issue with what I have is that changing ".circle"'s width and height to be smaller affects the positioning of the positioning of eveerything else forcing me to change .circle2's properties and .letter's properties until things line up.
CSS
.circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;
}
.circle2 {
width:80%;
height:80%;
border-radius: 50px;
position:relative;
top:5%;
left:5%;
border: 5px solid #FFF;
}
letter{
position:relative;
top:45%;
left:30%;
margin:auto;
cursor:pointer;
color: #fff;
font-size: 60px;
font-weight: bold;
display: inline-block;
line-height: 0px;
}
letter:before {
content: "A"
}
HTML
<div class="circle">
<div class="circle2">
<a class="letter"></a>
</div>
</div>

Answer 1

Have a look. The only thing that's tricky is the "A" font size. You could use a library like http://fittextjs.com/ to accomplish this fully.
http://jsfiddle.net/cSBw3/1/
Code is bellow and modified.
CSS3
.container {
width: 100px;
height: 100px;
text-align: center;
}
.circle {
width: 100%;
height: 100%;
background: blue;
cursor:pointer;
position: relative;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle:after {
content:"";
display: block;
position: absolute;
/* width: 80%; height: 80%; */
top: 10%; bottom: 10%;
left: 10%; right: 10%;
border: 5px solid #FFF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.letter {
cursor:pointer;
display: block;
}
.letter:before {
content: "A";
display: block;
position: absolute;
bottom: 19%;
right: 19%;
font-size: 3em;
font-weight: bold;
color: #fff;
}
HTML
<div class="container">
<div class="circle">
<a class="letter"></a>
</div>
</div>