css中的小箭头按钮答案

【问题标题】：small arrow button in csscss中的小箭头按钮
【发布时间】：2018-08-16 11:21:46
【问题描述】：

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

上面的设计基本上是一个左侧带有箭头按钮的文本。

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

我尝试从 w3schools 关注这个tutorial，但不知何故我无法复制相同的箭头。

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

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

【问题讨论】：

你自己试过什么代码，添加箭头？另外，请提供箭头的来源，以便我们提供帮助 - 即在图像、字体图标、编码图像中？
@FluffyKitten 我尝试从那里使用 HTML 代码，但仍然无法复制相同的箭头。
如果你想使用一个特定的箭头，你必须找到它的来源。在您链接到的 W3schools 页面的任何地方，我都没有看到您图像中的箭头。

标签： html css button css-shapes

【解决方案1】：

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

.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;
}

&lt;div class="share"&gt;Share This Article&lt;/div&gt;

【讨论】：

看起来很相似，但在设计上它非常胖。我们能以某种方式增加它的大小吗？
就像我提到的，您可以创建一个完全符合您需要的图像。我不确定您能否使用 unicode 找到完美匹配。试试背景图片。

【解决方案2】：

基于另一个答案，这个答案正确地放置了字体实体。

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

.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>

【讨论】：

如果您检查，它看起来与设计不相似。
看起来很相似，但在设计上它非常胖。我们可以以某种方式增加它的大小吗？