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

Question

我正在调整一个开源项目，我们的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>

在相应的html文件中有这样的：

 .by-line:before {

   font-family: 'collier72-icons'; 
   font-size: 2.7rem;
   content: 'y';
   color: $mid-grey;
   position: absolute;
   left: -6.5rem;
   bottom: 0.1rem;
   -webkit-font-smoothing: antialiased;

}

结果最终看起来像这样：

看起来很棒，对吗？ ...但是我想把它改成看起来像我创建的这个模型：

所以，我需要更改布局，但我不知道如何更改haml文件。如果它是html我会添加一个带有背景图像的div ..或者甚至只是一个内嵌图像...但我已经落入了haml land并且我无法起床。

Answer 1

更改content属性并从那里进行调整。

.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;
}

Answer 2

如果您希望使图像响应，可以使用背景图像＆amp;将背景设置为响应。

小提琴：https://jsfiddle.net/pohuski/x0d4v80y/1/

.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;
}