Question

我正在尝试创建一个图标，它应该像font-awesome一样工作，每当我应用一个类时，它会显示基于font-size的图像。我已经能够在chrome中执行此操作，但相同的代码在Firefox中不起作用。

div {
  font-size: 14px;
}
.custom-icon-jazz {
    content: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
    height: 2em;
    width: 4em;
  }
  .custom-icon-jazz::before {
    content: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
    height: 2em;
    width: 4em;
  }

<div>
  <i class="custom-icon-jazz"></i>  
</div>

::before仅适用于Firefox。在chrome中，普通类很容易应用。

为了方便我创建这个pen，在不同的浏览器上显示不同大小的图像，你可以看到这个链接并注意到这个笔的firefox和chrome渲染之间的区别。

Answer 1

请注意：after伪元素是一个框，后者又包含生成的图像。无法为图像设置样式，但您可以设置框的样式。允许调整背景大小。但是，您仍然需要指定块的宽度和高度。

您应该尝试以下方式：

＆＃13;

div {
  font-size: 14px;
  .custom-icon-jazz {
    background-image: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
    background-size: 4em 2em;
    height: 2em;
    width: 4em;
    content:"";
    display: inline-block;
  }
  .custom-icon-jazz::before {
    background-image: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
    background-size: 4em 2em;
    height: 2em;
    width: 4em;
    content:"";
    display: inline-block;
  }
}

＆＃13;

<div>
  <i class="custom-icon-jazz"></i>  
</div>

＆＃13;

从CSS中的图像创建自定义图标

1 个答案: