如何为图标添加圆形外框，实现符合设计图的自定义标记样式？

实现方案 #

你需要调整图标容器的布局属性、底部三角的层级和样式，修改后的完整代码如下：

修改后的CSS代码

.markerClass {
  background: black;
  position: absolute;
  white-space: nowrap;
  font-size: x-large;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  border: 2px solid red;
  padding: 2px 6px 2px 2px;
  display: flex;
  align-items: center;
}

/* 底部红色外三角 */
.markerClass:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 15px solid red;
}

/* 底部黑色内三角，和上方背景衔接 */
.markerClass:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 12px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 12px solid black;
}

/* 电话图标容器样式 */
.markerClass .icon-wrap {
  background-color: #808080;
  color: white;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  font-size: 0.9em;
}

.markerClass .text-wrap {
  background-color: black;
  color: white;
}

修改后的HTML代码

<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 class="icon-wrap"><i class="fa fa-phone"></i></span>
  <span class="text-wrap">MyName</span>
</div>

直接运行以上代码即可得到和设计图一致的标记效果，你可以根据需要调整尺寸数值适配自己的项目要求。

内容的提问来源于stack exchange，提问作者LAffair