Question

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

enter image description here

如果最终我不得不使用图像，我可以这样做;但是，我更容易操作为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>

Answer 2

在<head>部分

中加入此内容

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

然后

<h3><i class="fa fa-map-marker"></i> Scotland</h3>

您可以根据需要设置样式

Answer 3

对于显示的符号，没有HTML实体也没有HTML字符引用，因为它根本不是编码字符。 Twitter使用私有编码字体和依赖于使用特定字体的字体技巧。

要在标题元素内容前面使用符号，您可以将该符号用作图像，并使其成为元素的不重复背景图像，并在元素上设置合适的左边距。

Answer 4

这与“通过伪元素自己滚动”方法略有不同。

.icon {
  box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 5px solid red;
    border-radius: 100%;
}

.icon::after {
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 1px 0 0 -6px;
    display: block;
    content: '';
    border: 6px solid transparent;
    border-top: 10px solid red;
    border-bottom: none;
}

<h3><i class='icon'></i> Scotland</h3>

什么是位置符号的HTML实体

4 个答案: