自定义图像上绝对定位的FontAwesome标记(地图)

时间:2017-11-01 19:58:22

标签: html css font-awesome

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

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

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

请参阅下面的示例;



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

<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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

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

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

的伪元素相同

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