html - 位置符号的 HTML 实体是什么

Question

我正在设计一个网站，需要一个位置符号，就像 Twitter 上的一样。

如果最终我不得不使用图片，我也可以接受；但是，我更容易将其作为 HTML 实体进行操作。

我想使用它的方式是 <h3>{entity code/image} Scotland</h3>

Answer 1

使用伪元素创建您自己的图标

h3 {
  display: inline-block;
  padding-left: 30px;
}
h3:after {
  content: '';
  background: red;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  border-radius: 50% 50% 50% 0%;
  transform: rotate(-50deg);
}
h3:before {
  content: '';
  background: white;
  width: 8px;
  position: absolute;
  height: 8px;
  left: 16px;
  border-radius: 50%;
  top: 33px;
  z-index: 1;
}

<h3> Scotland</h3>