动态拉伸和缩放font-awesome图标

Question

我已经看过无数的片段like this one，将字体包含为＆＃34;背景图片＆＃34;：

div 
{
    width : 100%;
    height : 200px;
    margin : 20px;
    background-color : grey;
    color : #fff;
    position : relative;
}

div:before
{
      position:absolute;
        font-family: FontAwesome;
        top:0;
        left:0px;
      font-size : 100px;
      content: "\f003";
}

JSFiddle

结果：

有没有办法让字体动态调整大小以填充100％的大小作为背景图像，类似于使用的任何方法here？或者有什么方法可以在响应式页面中正确使用它作为背景图像，我不知道它将要填充的容器的宽度/高度？

我正在考虑使用变换：Css, Can I stretch text? 但就我而言，这很难，因为我不知道我有多大的规模。

我以为我会问这个问题，因为在回到普通的旧背景图片之前，可能有一种方法可以做到这一点。

其他没有帮助的链接（很多）：

• Font scaling based on width of container
• CSS Scale an element with 100% width
• Have text scale up in size to fit the container
• resize font-size according to div size