使用 font-size 调整字体真棒字体答案

【问题标题】：Resizing Font Awesome Fonts with font-size使用 font-size 调整字体真棒字体
【发布时间】：2016-09-18 03:35:36
【问题描述】：

我一直在尝试拍摄两个锁的字体图像并将它们堆叠在一起。然后，我想稍微调整其中一个的大小，这样看起来底部有一个边框。但是，我很难弄清楚如何正确调整它的大小，而且我不明白为什么 font-size 没有按预期工作。有人可以向我解释我做错了什么吗？

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

【问题讨论】：

我不完全确定您要做什么...看起来您的蓝色锁在黑色锁内。蓝色的似乎大约是蓝色的一半大小，这在#lock-black 上的font-size:200% 是有道理的。请注意，蓝色锁的 id 中有语法错误；它应该是一个破折号，而不是等于。

标签： html css fonts

【解决方案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>

【讨论】：