Personalizing the placement of FontAwesome markers on an Image (map) with absolute positioning

I have successfully positioned markers on a map using FontAwesome to ensure they maintain their relative position when the map is resized.

Currently, each marker consists of a number inside a circle created with FontAwesome. However, I am interested in utilizing a pseudo-element to position the number within the circle and consolidate it into one marker.

Despite trying various approaches, I have not been able to achieve this desired outcome.

Please refer to the example provided below;

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

htmlcssfont-awesome

Answer №1

To create a unique design for the a element, you can set it in absolute position and utilize the before or after pseudo-elements. This allows you to have two distinct elements within the a tag and manipulate their z-index values to position one below the other.

Additionally, you can optimize your CSS by combining styles for the pseudo-element shared by both instances of one and two.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Differences between HTML viewports and media queries

For simple webpages, my general rule is to utilize viewport units as they provide a lot of flexibility to the website. However, when dealing with complex webpages, I usually opt for media queries. In some cases, especially intermediate ones, I find it ben ...

htmlcssmedia-queries

Uniformly sized text containers and buttons

Seeking assistance to align a text field and a button in a way that they appear as a combined element. The desired look is shown below (screenshot taken from Chrome Linux): However, when viewed in Firefox Linux, the button is slightly taller by two pixels ...

css

adding a new transformation to the current properties

Is it possible to add a new transform property to existing ones? For instance, let's say I have a div.animation with the following style: .animation { transform: translateX(-50%) translateY(-50%); } Now I want to include transform: scale(1) to ...

htmlcss

Troubleshooting problem with spacing on three horizontal divs

I am currently working on building an E-commerce website to gain some practice. Here is how the div is set up: .small-container { max-width: 1080px; margin: 5px; padding-left: 25px; padding-right: 25px; } .col-4 { flex-basis: 25%; padding ...

htmlcss

How can CSS be utilized to guarantee wrapping at the span boundary?

Looking for a way to ensure that tags on my blog post always display on one line, I have created a div containing several spans. How can I achieve this using CSS? <div> <span class='tag'>math</span> <span class='tag ...

htmlcss

Surrounding space in SVG

I am working on a project that involves using an svg icon generated by a plugin. However, I have noticed that the svg has some unwanted blank space around it that I need to modify. Can anyone help me understand the cause of this blank space and suggest how ...

htmlcsssvg

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...

javascripthtmlangulartypescriptvalidation

Alter the color of a hyperlink when it is hovered over

Looking to create a menu with links and descriptive paragraphs that change color when hovered over. Preferably done with CSS only, without the use of JS or jQuery. For example: <a class="title" href="page1.html">Page 1</a> <hr/> & ...

htmlcsshyperlink

Experiencing a problem with Datatables where all columns are being grouped together in a single row

After creating a table with one row using colspan and adding my data to the next row, I encountered an issue with the datatables library. An error message appeared in the console: Uncaught TypeError: Cannot set property '_DT_CellIndex' of unde ...

javascriptjqueryhtmldatatables

How to add color to an HTML table depending on 3 different conditions

I have set 3 specific colors in my CSS. I have an HTML table and I am looking to have the background color of a cell change based on 3 conditions: if the cell contains the text 'True' - color green if the cell contains the text 'False& ...

htmlcssangular

Animating a background image to slide in from the bottom to the top using CSS transition

Here is a link to a codepen example: https://codepen.io/jon424/pen/XWzGNLe The current effect in this example involves covering an image with a white square, moving from top to bottom when the "toggle" button is clicked. I am interested in reversing this ...

javascripthtmlcss

extract various information from a csv file

Having trouble reading items from a CSV file and adding them to an input form? When using a specific option value that allows you to add items by pressing comma, it doesn't work when reading from the .csv file. What could be causing this issue? with ...

htmlpython-3.xcsvflask

Enhancing table style navigation by dynamically adding the 'active' class/id based on the current URL

I am currently working on a WordPress site and I need to implement a table navigation. My goal is to have each cell change its background color when the page is active. Is there a way to achieve this using PHP or JS? <table class="MenuTable" cellspaci ...

phpcsswordpress

Tips for developing a custom function to retrieve information from a WCF Rest service and showcase it in a table

In my code, I have created a function called service.js to get data from a WCF Rest API in JSON format. Then, I implemented another function called entryCtrl.js to fetch the data and display it in HTML. service.js (function (app) { app.service("CRUD_An ...

htmlasp.netangularjsscopewcf-rest

JavaScript function failing to utilize innerHTML output

Having trouble with my BMI calculator code. Even after adding sample text for testing in JavaScript, the function still isn't working. Can someone help me figure out what's wrong? <h2>Welcome to BMI calculator</h2> <h4>Please ...

javascripthtmlfunction

IE8 experiencing issues with colgroup tag

Having trouble styling a data table with alternating row colors. 1) Need help applying alternating row style without having to add classes to each individual TD? 2) Colgroup works in IE8 but having alignment issues for specific columns (cols=A&SI Cap ...

htmlcsscross-browsercolgroup

Creating an image in jpg format from an html file using a button

I have a unique HTML code for an email signature from my company and I am looking to add a button that can generate a JPG or PNG image of the signature without having to resort to PrintScreen and manual cropping in editing tools like Paint or Photoshop. Ho ...

html

How can I apply max-width and max-height to a background image?

It seems like a simple task. I am currently transitioning my layout to become more fluid by working on creating scalable images. While using the img tag and setting max-width to 100% is effective, I am considering using a div with the image set as its bac ...

imagefluidcss

Is it necessary for each React component to have its own individual stylesheet?

Looking for some advice on React as a newbie here. I'm wondering whether each React component should have its own stylesheet. For instance, if I have my main App component that gets rendered to the browser, is it sufficient to include a CSS file the ...

javascriptcssreactjs

Reducing div size when clicked - Using JQuery version 1.9

I am looking to make a specific div shrink in size, while keeping all the data visible, each time a user clicks on a certain icon with the class legend-icon. For example, I want the div with the ID #Chart to shrink when clicked. This is the HTML code: &l ...

javascriptjquerycssjquery-animate