Question

这是一个问题我正在寻找一个简洁的解决方案：我想从图标字体中找出一个图标，该图标位于图像上的伪元素上。此图像的行为是负责任的（它在较小的视口上缩小，并在较大的视口上生长，直到达到其原始大小）。

我想要的图标或多或少与图像的行为相同。这意味着它应该相应缩小并增长到视口，直到达到图像的最大宽度。

我很难找到这个原因的解决方案，在我看来，图标大小上唯一的属性是“font-size”，这不是很灵活。它可以使用媒体查询进行调整，但这对我来说听起来并不好。我正在寻找的是“背景大小：封面;”

我知道有很多方法可以解决这些问题，例如将图标作为图形的一部分，但我还没有放弃使用图标字体来解决此问题。

标记：

<div class="wrapper">
 <div class="image">
   <img src="http://www.placehold.it/500/500">
   <span aria-hidden="true" data-icon="&#x002b;"></span>
 </div>
</div>

样式：

//include icon-font
@font-face {
 font-family: "icons";
 src: url("https://css-tricks.com/examples/IconFont/fonts/IcoMoon.woff") format('woff');
}
//set icon on pseudo-element
[data-icon]:before {
 font-family: icons; 
 content: attr(data-icon);
 speak: none; 
 //define size of icon
 font-size: 9em;
}
.wrapper {
 position: relative;
 z-index: 0;
 display: inline-block;
}
//position icon absolute on img
.image span {
 display: inline-block;
 position: absolute;
 z-index: 10;
 top: 0;
 left: 0;
}

img {
 display: block;
 width: 100%;
}

这是一个小提琴：fiddle

所以，如果有人可以提供帮助，我会感激不尽。

在响应图像上调整图标的大小（来自图标字体）

0 个答案: