создание <i> тег значение <input type = 'button'>

Question

Я использую Font Awesome и хотел бы сделать значение простого <input type='button'> одним из значков fa, например. <i class='fa fa-bold'></i>

Однако, когда я пишу:

<input id='bold' type='button'><i class='fa fa-bold'></i></input> 

это делает кнопку, а затем, справа от того, Высокой иконки шрифта. Разве это невозможно достичь?

Answer 1

Почему бы не использовать тег кнопки вместо этого? а затем положить

<i class='fa fa-bold'></i> 

внутри кнопки тега, как

<button id="bold"><i class='fa fa-bold'></i></button> 

Я считаю, что входные элементы являются недействительными элементы, следовательно, они не имеют никакого содержания. Вы можете достичь этого через css, если вы настаиваете на этом ».

Answer 2

input элементы void elements:

Недействительные элементы: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Таким образом, они не имеют никакого содержания:

Void elements не может иметь любое содержимое (так как нет никакого конца тега, не содержания не может быть поставлено между открывающим тегом и закрывающим тегом).

Вы можете отображать только текст в них с помощью атрибута value [source]:

Когда вход кнопки привязка относится к input элементу которого type атрибут в [.. .] Button, ожидается, что элемент будет отображаться как поле «встроенный блок», отображаемое как кнопка , около одной строки, содержащая содержимое элемента value атрибут

Если вы хотите, чтобы сделать HTML-элементы внутри кнопки, используйте button элементов вместо [source]:

Когда кнопка привязки относится к button элементу, то элемента, как ожидается для рендеринга как поля «встроенный блок», отображаемого как кнопка , содержимое которой является содержимым элемента.