使用font-size调整字体真棒字体的大小

Question

I have been trying to take two font images of a lock and stack them on top of each other. Then, I wanted to resize one of them slightly so it looks like there is a border wrapped around the bottom one. However, I am having a difficult time figuring out how to size it properly and I dont understand why font-size isn't working as expected. Could someone explain to me what I am doing wrong?

Here is the fiddle: http://fiddle.jshell.net/4LqeN/1694/

 i { text-align: center; padding: 1px 1px; display: inline-block; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -moz-box-shadow: 0px 0px 2px #888; -webkit-box-shadow: 0px 0px 2px #888; box-shadow: 0px 0px 2px #888; } #lock-black{ font-size: 200% } 

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/> <span class="fa-stack"> <i id="lock-black" class="fa fa-lock fa-stack-2x "></i> <i id="lock=blue" class="fa fa-lock fa-stack-1x" style="color:blue" ></i> </span> 

Answer 1

Figured it out!

 i { text-align: center; padding: 1px 1px; display: inline-block; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -moz-box-shadow: 0px 0px 2px #888; -webkit-box-shadow: 0px 0px 2px #888; box-shadow: 0px 0px 2px #888; } #lock-black{ font-size: 200%; } #lock-blue{ font-size: 150%; } 

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <span class="fa-stack"> <i id="lock-black" class="fa fa-lock fa-stack-2x "></i> <i id="lock-blue" class="fa fa-lock fa-stack-1x" style="color:blue" ></i> </span>