使用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>