이미지 (지도)에 절대적으로 배치 된 FontAwesome 마커 사용자 정의

Question

저는 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>

Answer 1

당신은 절대 위치에서 a는 다음에 이전 (이후)를 사용하여 만들 수 있습니다. 마찬가지로 당신은 그 안에 두 개의 다른 요소를 가질 것이고, 숫자 아래에 의사 요소를 만들기 위해 각각의 Z- 인덱스로 재생할 수 있습니다. 의사 요소가 왜 대신지도 핀의 글꼴 멋진 HTML을 호출하지 하나 및 이

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

<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="#" id="one" class="map-marker"> 
 
    <span aria-hidden="true">1</span> 
 
    </a> 
 
    <a href="#" id="two" class="map-marker"> 
 
    <span aria-hidden="true">2</span> 
 
    </a> 
 
</div>