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

Question

我一直试图拍摄一把锁的两个字体图像，并将它们彼此堆叠。 然后，我想略微调整其中一个的大小，以使底部好像有一个边框。 但是，我很难弄清楚如何正确调整其大小，而且我不理解为什么字体大小无法按预期工作。 有人可以向我解释我在做什么错吗？

这是小提琴： 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

弄清楚了！

 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>