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

Menus that mimic the style of Google Translate's select options

I'm looking to design an HTML select menu using CSS in a similar fashion to Google Translate's style on Google Translate. I've searched for tutorials online, but they all involve jQuery. Is there a way to achieve something similar using only ...

javascriptjqueryhtmlcssdom

css: text not enclosed by a span tag

I created an HTML-CSS demo with two simple span tags. I added some content to each span, and applied the same CSS code to both. Surprisingly, the content of the right span goes beyond the border, while the content of the left span stays within the border. ...

htmlcss

MySQL Entry Update Failure

This is the HTML/EJS code snippet: <div class="Edit-Panel" style="display: none;"> <div class="Edit-Wrapper"> <div class="Editing"> <p class="Edit-Header ...

javascripthtmlsqlnode.jsejs

Select checkboxes by clicking a button that matches the beginning of a string in JavaScript

I have a form with a list of users and checkboxes below their names. Each user has a button that should select all checkboxes assigned to them. Below is the code for the dynamically created buttons and checkboxes. The included function takes the form name ...

javascriptphpjqueryhtmlcheckbox

Having trouble using the `.not` function in jQuery

I'm working on implementing a collapsible menu using jQuery. When any header is clicked, the next sibling (the box) should expand while all other boxes collapse. HTML <div class="finbox" id="finbox1"> <div class="finheader" id="finheade ...

javascriptjqueryhtml

Step-by-step guide on accessing and displaying a disc file within a webix application

I am a beginner in webix development and struggling to find documentation or help for my current issue. Within my webix application, I am trying to create a button (let's call it 'View Report') that when clicked will open a file from my loc ...

javascriptjqueryhtmlwebix

The Bootstrap popup fails to display when adding the bootstrap.min.css file

I am experiencing difficulties with CSS as I am relatively new to it. Currently, I am utilizing the bootstrap popup in the following example. Upon clicking the 'Full Spec' button, a popup box appears. However, it seems that the file bootstrap.mi ...

htmlcsstwitter-bootstrappopup

Only one specific SVG tag is affected by the CSS stylesheet

I'm encountering an issue with my web page that has multiple SVG tags. Each SVG tag includes a block of style tags containing CSS styles for the respective SVG element. The problem is that these styles seem to leak into the overall global styles. For ...

csshtmlsvg

My efforts to resolve the issues in my code have been ongoing, but unfortunately, I have been unable to find a solution

I'm struggling to insert my contact form code into the contact tab without it interfering with the tab bar. I want the form to appear in the middle of the page when the tab is clicked. I've tried various placements for the code but none seem to ...

htmlcss

Developing a jQuery Plugin to Generate an Interactive Dropdown Menu

I have a task to dynamically create a select list in which users can add options after the select list has been created. Check out my code snippet below: <script type="text/html" id="select_field"> <div class='row& ...

javascripthtmljquery

Creating a JavaScript function to selectively blur elements while leaving one in focus

My goal is to blur all elements on a webpage except for the p#this tag using vanilla JavaScript. I am determined to learn the intricacies of JavaScript, so I'm not looking for solutions involving jQuery or CSS. I came across a potential solution on t ...

javascripthtml

Having trouble with the "Corrupted @import" error during grunt build?

As I embark on my journey to create my very first Angular application, I have encountered a roadblock. Using Yeoman and angular-generator, everything seemed to be running smoothly with "grunt serve." However, when I attempted to execute "grunt build," the ...

javascriptcssangularjsgruntjsyeoman

How to correctly position a modal in a React application using CSS

Currently, I am working on integrating the react-modal NPM library into a React Typescript project. The issue I am facing is that the modal occupies the entire width of the screen by default, with padding included. My goal is to have it display as a small ...

cssreactjs

The beautiful synergy between Vuetify's v-input component and overflow animation

I am having trouble implementing an overflow animation on vuetify's v-text-field component. Despite my efforts, I can't seem to make it work as intended: <script setup> const text = 'very long long long long long text' </scri ...

cssvue.jsvuetify.jsvuetifyjs3

How can I change the padding that is being inherited from "@ .MuiAlert-icon"?

Is there a method to override the padding inherited from "@ .MuiAlert-icon"? The Chrome inspector indicates that the current padding is set to 7px. .MuiAlert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; ...

javascriptcssmaterial-ui

Ways to customize the size of a radio button with CSS

Is it possible to adjust the size of a radio button using CSS? ...

htmlcssradio-button

Incrementing numbers with jQuery append autoincrement

I am working with a dynamic list of input fields, each one with a unique incremental name. Here's an example structure... <input type="text" name="values[0]" value="some text"> <input type="text" name="values[1]" value="some other text"> ...

jqueryhtml

iTextSharp struggles to convert certain HTML elements to PDF format

After experimenting with the codes provided in this post, I managed to create the following code snippet: var my_html = this.GetmyReportHtml(); var my_css = this.GetmyReportHtmlCss(); Byte[] bytes; using (var ms = new MemoryStream()) { ...

c#html.netpdfitext

Optimal approach for reutilizing Javascript functions

After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, ...

javascriptjqueryhtmlcsslayout

The ng-repeat-start feature is not functioning properly across different levels

I am attempting to utilize the ng-repeat-start directive in order to construct a table that resembles the following: The structure of my JSON data is as follows: [ { "name": "Chapter 1", "parts": [ { "text": "Lorem ipsum... 1", ...

javascripthtmlangularjsjsonangularjs-ng-repeat