Css 如何最好地用png替换基于svg字体的图形

我正在修改一个开源项目，我们的fork与之有点不同，我需要切换一些硬编码的图形和措辞

在页脚文件（用haml编写）的顶部有

.footer
    .footer-top

        %p.by-line Brought to you by #{@city.brought_by}, in partnership with the people of #{@city.name}. <a href="http://#{@city.agency_url}">#{@city.agency_url}</a>

结果如下所示：

看起来很棒，对吧。。。但我想把它改成我创建的模型：

---

所以，我需要更改布局，但我不知道如何更改haml文件。如果是html，我会添加一个带有背景图像的div。。甚至只是一个内联图像…但我在哈姆土地上跌倒了，我无法站起来

更改

内容

属性并从中进行调整

.by-line:before {
  font-family: 'collier72-icons'; 
  font-size: 2.7rem;
  content: url("path/to/file.png");
  color: $mid-grey;
  position: absolute;
  left: -6.5rem;
  bottom: 0.1rem;
  -webkit-font-smoothing: antialiased;
}

---

如果希望使图像响应，可以使用背景图像并将背景设置为响应

小提琴：

---

ps-如果您好奇，这是基于github.com/city72/city-72I上的github中的代码编写的。我会尝试一下。谢谢六羟甲基三聚氰胺六甲醚。。我无法让它工作，但我认为这可能与我的应用程序中引用图像的方式有关。明天我会再试一试（对我来说，进行前端编码已经太晚了）。再次感谢！Awesome:D happy times~。按行：在{content:url（“/assets/static/cc_logo.png”）；位置：绝对；显示：块；宽度：100%；最大宽度：169px；高度：66px；左侧：-11rem；底部：-.2rem；}

.by-line:before {
  font-family: 'collier72-icons'; 
  font-size: 2.7rem;
  content: url("path/to/file.png");
  color: $mid-grey;
  position: absolute;
  left: -6.5rem;
  bottom: 0.1rem;
  -webkit-font-smoothing: antialiased;
}

.by-line:before {
  content:'';
  display: block;
  width: 100%; /* width of image */
  max-width: 300px; /* width of image */
  height: 150px; /* height of image */
  background: url(path/to/image.png) no-repeat fixed center; /* image path */
  position: absolute;
  left: -6.5rem;
  bottom: 0.1rem;
}