イメージ（マップ）に絶対配置された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を作ることができます。同様に、内部に2つの異なる要素があり、それぞれのZインデックスを使って数字の下に擬似要素を作ることができます。

擬似要素はと

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