Adding a circle around icon-CodePudding

I don't have much experience with styling and I'm trying to create a marker that looks like in the attached

Till now I managed to do the changes like in the attached code snippet, but I can't make it display the icon like 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>

Is there a way to make it look ok?

CodePudding user response：

Set negative margin for the first span and set border for 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>

CodePudding user response：

As you can see your icon has less width than height , so to make it circle add padding to left & right like this :

padding: 0 3px;

And add a white border to icon like this:

border:3px solid white

You can specify styles according to need (like border-width padding)

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

CodePudding user response：

<style>
    .rect{
        width: 100px;
        height: 50px;
        background: #ff0000;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        border: 2px solid #000;
    }
    span{
        font-size: 18px;
        margin-left: 15px;
        color: #fff;
    }
    .outer-div{
        background: #f08080;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 9px;
        left: -18px;
        border-radius: 50%;
        border: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>


<div class="rect">
    <span>Call Now</span>
    <div class="outer-div">
        <i class="fas fa-mobile-alt"></i>
    </div>
</div>

CodePudding user response：

Try this

CSS

.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

<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">MyName</span>
</div>

Script

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

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"/>