css 中的小箭头按钮

Question

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

上面的设计基本上是左边有箭头按钮的文本。

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

我尝试按照 w3schools 中的 tutorial 进行操作，但不知何故我无法复制相同的箭头。

文本的CSS代码（我在fiddle中使用过）：

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

Answer 1

根据另一个答案，这个答案正确地布置了字体实体。

正如您在上面的评论中所讨论的，箭头与您要查找的箭头不完全相同。您需要将其裁剪出来并创建一个图像添加到图像标签中，或者以文本形式找到图像的来源。

.share {
    padding-left: 6%;
    padding-top: 5%;
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #4676F2;
}
.share p::before {
  content: "A6";
  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>

Answer 2

请尝试以下代码。 unicode 箭头并不完全是您模拟但关闭的方式。如果您需要精确的箭头，可以将 .share::before 规则切换为使用背景图片。

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

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

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

css 中的小箭头按钮

small arrow button in css

html

css

button

css-shapes