在css中的小箭头按钮

Question

我有一个设计，我必须在HTML / CSS中复制。

上述设计基本上是左侧带箭头按钮的文字。

我复制了fiddle中的文字（这非常简单）。我想知道如何将箭头留在文本中？

我尝试从w3schools跟踪这个tutorial，但不知怎的，我无法复制相同的箭头。

文本的CSS代码（我在小提琴中使用过）：

.share {
    padding-left: 6%;
    padding-top: 5%;
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #4676F2;
}

Answer 1

请尝试以下代码。 unicode箭头不是你嘲笑但关闭的方式。如果您需要精确的箭头，可以切换.share::before规则以使用背景图像。

＆＃13;

＆＃13;

.share {
    padding-left: 6%;
    padding-top: 5%;
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #4676F2;
}

.share::before {
  content: "\27A6";
  color:#000;
  padding-right:8px;
}

＆＃13;

<div class="share">Share This Article</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据另一个答案，这个将字体实体放在右边。

正如您在上面的评论中所讨论的那样，箭头与您正在寻找的箭头不同。您需要将其剪切掉并创建要添加到图像标记的图像，或者以文本形式查找图像的来源。

.share {
    padding-left: 6%;
    padding-top: 5%;
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #4676F2;
}
.share p::before {
  content: "\27A6";
  color:#000;
  padding-right:8px;
  font-size: 25px;
  vertical-align: middle;
}
.share p {
  vertical-align: middle;
}

<div class="share">
            <p>Share This Article</p>
</div>

<div class="share">
            <p><img src=""/>Share This Article</p>
</div>