位置符号的HTML实体是什么

Question

我正在设计一个网站，并且需要一个位置符号，例如Twitter上的。

如果最终我不得不使用图像，那我就可以了。但是，对我来说，将其作为HTML实体进行操作比较容易。

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

Answer 1

使用pseudo元素创建自己的图标

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>