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

时间:2015-09-15 12:49:29

标签: html css html5 css3

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

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

我需要在其中添加图标,如下所示:

enter image description here

  • 首先,如何在文本上方添加图标并集中统一。
  • 第二是可以只使用CSS来实现。 (如果不是只对HTML进行少量修改)
提前谢谢。

4 个答案:

答案 0 :(得分:5)

  

我需要在其中添加图标,如下所示:

     

首先,如何在文本上方添加图标并集中对齐。

您应该使用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;
}

after上使用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/

<强>段

&#13;
&#13;
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; }
&#13;
<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" />
&#13;
&#13;
&#13;

答案 1 :(得分:2)

只需将您的课程添加到css文件

.backButton{
  background: url(https://cdn3.iconfinder.com/data/icons/musthave/24/Delete.png) no-repeat;
  background-position:center top;
  height: 40px;
  width: auto;
  text-align: center;
  padding:24px 10px 10px 10px;
  border: 1px solid #555555;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
<input type="button" id="Back" value="Back" onclick="back();" class="backButton">

答案 2 :(得分:0)

我希望这会有所帮助

<强> HTML

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>

答案 3 :(得分:0)

HTML

<button id="btnCancel" onClick="choose(1)">Cancel</button>

CSS

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

#btnCancel {
  padding:10px;
    background: url(https://upload.wikimedia.org/wikipedia/commons/d/da/Crystal_button_cancel.png) top center ;
    background-repeat: no-repeat;
    background-position: 50% 10%;
    border-radius : 20px;
}