文字上方的HTML / CSS位置图标

Question

目前，我的页面上有很多后退按钮：

<input type="button" id="Back" value="Back" onclick="back();" class="backButton">

我需要添加图标以使其看起来像这样：

• 首先，我如何在文本上方添加图标并使其居中对齐。
• 其次，可以仅使用CSS来实现。（如果不是仅对HTML进行了很小的修改）

提前谢谢。

Answer 1

我需要添加图标以使其看起来像这样：

首先，我如何在文本上方添加图标并使其居中对齐。

您应该button为此使用元素。为此存在它（自定义样式和标记）。但是，您不必为此使用background-image。为了能够通过CSS控制所有内容，只需确保所有按钮的标记都相同，然后使用类进行控制即可。

例如：

标记：

<button class="cancel">
    <i></i>
    <span>Cancel</span>
</button>

CSS：

button.cancel i::after {
    content: '\00d7'; display: block;
    font-size: 26px; font-style: normal; font-weight: 600; color: red;
}

在上使用afterpsuedo-element i（或span其他），并根据类使用content属性将图标插入为文本（字形），您可以根据需要设置样式。

其次，可以仅使用CSS来实现。（如果不是仅对HTML进行了很小的修改）

这很有可能，但是很麻烦。我不推荐这种方法，这是不值得的。你被警告了。

要使用现有input的标记而不更改任何标记，您需要对input自身进行样式设置，并且必须使用background-image（实际上是两个背景图片）。该input造型有一个问题，它只要你与它的风格鼓捣失去了它的平台的风格。因此，您将失去像行为之类的按钮，以及像按钮渐变和效果之类的Windows。您将必须通过CSS复制所有这些功能。

例如：

标记：

<input type="button" value="Cancel" data-value="Cancel" />

CSS：

input[type=button] {
    min-width: 72px; height: 64px; position: relative;
    display: inline-block; vertical-align: top; padding-top: 36px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'), 
        linear-gradient(#f5f5f5, #dfdfdf);
    background-repeat: no-repeat, no-repeat;
    background-position: center 4px, center center;
    background-size: 24px, auto;
    border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'), 
        linear-gradient(#dfdfdf, #f5f5f5);
    background-repeat: no-repeat, no-repeat;
    background-position: center 4px, center center; 
    background-size: 24px, auto;
    outline: 0px;
}
input[type=button]:focus { outline: 0px; }

上面的代码首先使用background-image图标显示，然后background-image使用渐变显示（例如Windows平台样式）。它用于padding-top按下文本并:active设置状态以设置单击时反转梯度的行为。:focus状态删除outline。

所有这一切都模仿了一个人的行为button！最好自己使用button。

这是两种技术的组合演示：

小提琴：http : //jsfiddle.net/abhitalks/yw7wmvwh/1/

片段：

<button class="cancel">
    <i></i>
    <span>Cancel</span>
</button>

button.cancel i::after {
    content: '\00d7'; display: block;
    font-size: 26px; font-style: normal; font-weight: 600; color: red;
}

Answer 2

我希望这个能帮上忙

超文本标记语言

button {
font-size: 20px;
    width: 100px;
    height: 100px;
    }

#rock {
  padding:10px;
    background: url(https://upload.wikimedia.org/wikipedia/commons/6/65/Crystal_button_cancel.svg) top center ;
    background-repeat: no-repeat;
    background-position: 50% 10%; 
}

<button id="rock" onClick="choose(1)">Cancle</button>