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

Question

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

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

我需要给它添加图标，看起来像这样:

• 首先，我如何在文本上方添加图标并将它们居中对齐。
• 其次，是否可以仅使用 CSS 来实现。 (如果不是只对 HTML 进行少量修改)

提前致谢。

Answer 1

I need to add icon to it to look something like this:

First how do I add icon above text and align them centrally.

你应该为此使用 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;
}

在 i(或 span 等)上使用 after 伪元素，并根据类使用 content 属性将您的图标作为文本(字形)插入，您可以根据需要设置样式。

And second is it possible to do it using only CSS. ( if not with only a minor modifications to HTML )

这很有可能，但很麻烦。我不推荐这种方法，不值得付出努力。您已收到警告。

要按原样使用现有的 input 而无需对标记进行任何更改，您需要对 input 本身进行样式设置，并且必须使用 background-图片(实际上是两张背景图片)。 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 本身。

下面是这两种技术的组合演示:

fiddle :http://jsfiddle.net/abhitalks/yw7wmvwh/1/

片段:

button { 
    min-width: 72px; height: auto; 
    display: inline-block; vertical-align: top; 
}
button.ok i::after {
    content: '\2713'; display: block;
    font-size: 23px; font-style: normal; font-weight: 600; color: green;
}
button.cancel i::after {
    content: '\00d7'; display: block;
    font-size: 26px; font-style: normal; font-weight: 600; color: red;
}

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

<button class="ok">
    <i></i>
    <span>Ok</span>
</button>
<button class="cancel">
    <i></i>
    <span>Cancel</span>
</button>
<hr/>
<input type="button" value="Cancel" data-value="Cancel" />