Question

我使用FontAwesome在地图上绝对定位了标记，因此我可以调整地图的大小，图像保持相同的相对位置。

每个都有一个数字，FontAwesome字符是一个圆圈，但我希望使用一个伪元素并将数字放在圆圈中并有一个标记。

这可能吗？我尝试了很多不同的方法，没有一个对我有效。

请参阅下面的示例;

＆＃13;

.map-marker {
    position: absolute;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
}
#one {
    top: 70px;
    left: 20px;
}
#one:after {
    content: "\f111";
    font-family: 'FontAwesome';
}
#two {
    top: 50px;
    left: 260px;
}
#two:after {
    content: "\f111";
    font-family: 'FontAwesome';
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="map_container">
  <img src="http://geology.com/world/world-map-clickable.gif"/>
  <a href="#"><div id="one" class="map-marker" aria-hidden="true">1</div></a>
  <a href="#"><div id="two" class="map-marker" aria-hidden="true">2</div></a>
</div>

＆＃13;

Answer 1

您可以将enum置于绝对位置，然后在其之前（或之后）使用。就像那样，你将在其中有两个不同的元素，你可以使用每个元素的z-index来使伪元素低于数字。

您还可以简化CSS，因为一个和两个

的伪元素相同

.map-marker {
  position: absolute;
  font-size: 20px;
  text-shadow: 1px 1px 1px #000;
  text-decoration:none;
}
.map-marker span {
  position:relative;
  z-index: 2;
  color:#fff;
}
.map-marker:before {
  content: "\f111";
  font-family: 'FontAwesome';
  position: relative;
  right: -14px;
  z-index: 0;
}
#one {
  top: 70px;
  left: 20px;
}

#two {
  top: 50px;
  left: 260px;
}

自定义图像上绝对定位的FontAwesome标记（地图）

1 个答案: