HTML значок/CSS Позиция выше текста

Question

В настоящее время у меня есть много кнопок назад на моей странице:

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

мне нужно добавить иконку для того, чтобы выглядеть примерно так:

• Во-первых, как добавить значок над текстом и выровнять по центру.
• И второе возможно сделать это, используя только CSS. (если не только с незначительными изменениями в HTML)

Thx заранее.

Answer 1

Я надеюсь, что это поможет

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>

Answer 2

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

Answer 3

просто добавить класс 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">

Answer 4

мне нужно, чтобы добавить значок к нему, чтобы выглядеть примерно так:

Во-первых, как я могу добавить значок над текстом и выровнять их по центру.

Для этого вы должны использовать элемент button. Он существует для этой цели (пользовательский стиль и разметка). Однако для этого вам не нужно использовать background-image. Чтобы иметь возможность контролировать все через CSS, просто убедитесь, что у вас есть та же разметка для всех кнопок, которые у вас есть, а затем управляйте с помощью классов.

Например:

Markup:

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

Например:

Markup:

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

Вот комбинированный демо обоих методов:

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" />