Encircling the icon with a circle

My styling skills are limited, but I'm attempting to create a marker that resembles the image linked below:

https://i.stack.imgur.com/wXkaq.png.

So far, I've made some changes in the code snippet provided, but I'm struggling to get it to display the icon as shown in the image.

.markerClass {
  background: black;
  position: absolute;
  border-radius: 0;
  white-space: nowrap;
  font-size: x-large;
  line-height: 97%;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  border-color: red;
  border-style: solid;
  padding: 2px 2px 2px 0;
}

.markerClass:before {
  content: "";
  position: absolute;
  top: 29px;
  left: 8px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 13px solid transparent;
  border-top: 13px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="markerClass">
  <span style="background-color: #808080; color: white; border-radius:50%"><i class="fa fa-phone"></i></span>
  <span style="background-color: black; color: white; padding-left: 4px">MyName</span>
</div>

Anyone have suggestions on how to improve the appearance?

htmlcss

Answer №1

Incorporate a negative margin to adjust the positioning of the first span element and apply a border style to it.

.markerClass {
    background: black;
    position: absolute;
    border-radius: 0;
    white-space: nowrap;
    font-size: x-large;
    line-height: 97%;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    border-color: red;
    border-style: solid;
    padding: 2px 2px 2px 0;
}

    .markerClass:before {
        content: "";
        position: absolute;
        top: 29px;
        left: 8px;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 13px solid transparent;
        border-top: 13px solid red;
    }
.markerClass{margin-left: 20px;}
.markerClass span:first-child {margin-left: -15px; border: 5px solid #fff;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="markerClass">
  <span style="background-color: #808080; color: white; border-radius:50%"><i class="fa fa-phone"></i></span>
  <span style="background-color: black; color: white; padding-left: 4px">MyName</span>
</div>

Answer №2

It is evident that the icon has a narrower width compared to its height. To create a circular shape, you can apply padding to both the left and right sides like this:

padding: 0 3px;

Additionally, include a white border around the icon as shown below:

border:3px solid white

You have the flexibility to customize styles such as border-width and padding according to your requirements.

.markerClass {
  background: black;
  position: absolute;
  border-radius: 0;
  white-space: nowrap;
  font-size: x-large;
  line-height: 97%;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  border-color: red;
  border-style: solid;
  padding: 2px 2px 2px 0;
}

.markerClass:before {
  content: "";
  position: absolute;
  top: 29px;
  left: 8px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 13px solid transparent;
  border-top: 13px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="markerClass">
  <span style="background-color: #808080; color: white; border-radius:50%;padding:0 3px;border:3px solid white;"><i class="fa fa-phone"></i></span>
  <span style="background-color: black; color: white; padding-left: 4px">MyName</span>
</div>

Answer №3

Give this a shot

CSS Styling

.markerClass {
background: black;
position: absolute;
border-radius: 0;
white-space: nowrap;
font-size: x-large;
line-height: 97%;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
border-color: red;
border-style: solid;
padding: 2px 2px 2px 0;
border-left: none;
margin: 10px;
}

.markerClass:before {
    content: "";
    position: absolute;
    top: 29px;
    left: 8px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 13px solid transparent;
    border-top: 20px solid red;
    }
   .markerClass{
    margin-left: 20px;
    }
    .phone {
    margin-left: -5px;
    border: 2px solid #fff;
    padding: 9px;
    z-index: 1;
    position: relative;
    }

HTML Markup

<div class="markerClass">
<span class="phone" style="background-color: #808080; color: white; border-radius:50%"><i class="fa fa-phone"></i></span>
<span style="background-color: black; color: white; padding-left: 4px">YourName</span>
</div>

Javascript Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">   </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Important Links

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

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

The stacking order of React components

I am having an issue with the Z-index in my component-based React app. I currently have a list component that contains items, and I want to adjust the CSS scale and z-index to display one item in front of the others. The problem arises when the hovered it ...

cssreactjsreact-nativez-index

The HTML image file input restricts the user's selection to images stored in the gallery

On mobile devices, when I press the input it displays two options: camera and gallery. However, I only want to select from the gallery. How can I disable the camera option? ...

htmlinputfile-upload

Is OpenLayers + Ajax causing issues or errors?

Utilizing the code provided below to showcase an OpenLayers map within a DIV container presents a peculiar issue. Upon initial load of the webpage, the map does not display consistently - requiring multiple page refreshes in order for it to become visible. ...

phpjqueryajaxhtmlopenlayers

Excessive width of Bootstrap container

Encountering a rather simple issue: the bootstrap container inside my navbar is too wide, causing an unwanted horizontal scrollbar as it expands the body. You can view the problematic page here. The theme used for this site can be found here. What's ...

htmlcsstwitter-bootstrap

Connections transition among associated HTML pages

I am working on my very first website using HTML and I'm encountering some challenges with maintaining consistency across pages. On the top of my page, I have a div containing some links. While they function correctly, I noticed that the spacing betw ...

htmlcsspositionspacing

Efficiently handling multiple form submissions using a single jQuery Ajax request

I'm working on a page that has 3-4 forms within divs, and I want to submit them all with just one script. Additionally, I want to refresh the content of the specific div where the form is located. However, I'm unsure of how to specify the current ...

javascriptphpjqueryhtmlajax

The Bootstrap navigation menu fails to extend the parent div when toggled

When I toggle the button to show the menu on small screens, the menu overflows the parent div with id=contents instead of pushing it down. How can this issue be fixed? Here is the code: <body> <nav id="header" class="navbar navbar-default"& ...

javascriptjqueryhtmlcsstwitter-bootstrap

Showcasing extensive text in a Bootstrap pop-up message

I'm having some trouble showing a lengthy text in a twitter bootstrap tooltip. As you can observe from the image below, it's not working perfectly. Is there an easy solution to handle text that is too long for the bootstrap tooltip? EDIT (includ ...

jquerycsstwitter-bootstraptwitter-bootstrap-tooltip

Adjust the placement of the fixed header waypoint or change its offset

Currently working on developing a Wordpress site with the Avada theme, my goal is to have a sticky header that starts immediately at the top of the page. This is the website in progress: The site I'm trying to emulate is synergymaids.com. If you vi ...

javascriptjquerycss

Tips for implementing a toggle feature for an ion-card element

I am looking to create a toggle effect on ion-card, where clicking on the card will highlight it until either unclicked or another card is clicked. Similar to this - How can I achieve this effect on ion-card? Here is my HTML code - <ion-grid> ...

cssangularionic-frameworkionic3

Utilize the object's ID to filter and display data based on specified criteria

I retrieved an array of objects from a database and am seeking to narrow down the results based on specific criteria. For instance, I want to display results only if a user's id matches the page's correct id. TS - async getResultsForId() { ...

htmlangulartypescript

How does [name] compare to [attr.name]?

Question regarding the [attr.name] and [name], I am utilizing querySelectorAll in my Typescript as shown below: this._document.querySelectorAll("input[name='checkModel-']") However, when I define it in the HTML like this: <input [name]="check ...

htmlangulartypescript

CLS notifies about an Unrecognized CSS Element in Page Insights' Core Web Performance

My experience with Google PageSpeed Insights has been quite frustrating due to the numerous alerts I'm receiving about Unsupported CSS Properties. The importance of avoiding non-composited animations: Animations that are not composited can appear gli ...

csspagespeedgoogle-pagespeedpagespeed-insightscls

Plugin for turning text into "leet speak" using jQuery and Javascript

Recently, I've been on the hunt for a 1337 translator that I can seamlessly integrate into a jQuery plugin. While I believe I'm making progress, I can't shake off the feeling that something's amiss. My gut tells me that what I currently ...

javascriptjqueryhtmljquery-plugins

What is the correct way to nest multiple ng-if statements?

I'm currently grappling with a problem involving multiple nested ngIf directives applied to ng-template elements in Angular.js, and I've yet to find the ideal solution. While I am aware of workarounds, they are not as efficient as I would like th ...

htmlangular

Interacting with various cookies created from user-provided input (specifically from textboxes) simultaneously

I'm facing a challenging problem and I'm in need of some assistance. The task at hand is to create three text boxes for users to input values for cookies named: name, city, and hobby. Then, using a single button with an onclick event, a function ...

javascripthtmlcookies

Limiting the displayed portion of a table and implementing scrolling instead

I am currently working with a static HTML template that contains the following code: <table> <thead></thead> <tbody></tbody> </table> Using jQuery and AJAX, I am dynamically adding and removing rows and columns ...

javascriptajaxhtml

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

javascriptjqueryhtmlcssuser-interface

The jQuery element selection feature is not functioning

Within my HTML file, there lies a table with an empty tbody that is dynamically filled by jQuery once the document is fully loaded. The content of the table body is generated using a PHP script, where jQuery fetches the data via a simple GET request. Belo ...

phpjavascriptjqueryhtmlajax

Guide on embedding a form component within an iframe using ReactJS

I am trying to figure out how to render my form component inside an iframe, but so far it's only rendering the iframe itself. Any tips on how to accomplish this task? import './App.css'; import ReactDOM from "react-dom/client" impo ...

javascripthtmlreactjs