CODEWITHSUNDEEP
htmlinputsemantic-ui
Niklas
Niklas

Reputation: 25391

Semantic UI labeled icon button of type submit button

I am using Semantic UI and trying to add an icon to an input button type submit

This is my try:

<i class="sign in icon"></i>
<input type="submit" name="login-button" class="ui blue submit button" value="Login">

The problem is that the icon is displayed in front of the button and not inside the button.

This is how it can be done, with a div:

<div id="login-button" class="ui blue submit labeled icon button">
    <i class="sign in icon"></i> Login
</div>

Do you know any way to add an icon to a button type submit.

Upvotes: 1

Views: 5359

Answers (1)

cutemachine
cutemachine

Reputation: 6210

<button type="submit" name="login-button" class="ui blue submit button">
  <i class="sign in icon"></i>
  Login
</button>

Hope this helps.

W3 has this to say in regards to the button element:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

Upvotes: 4

Related Questions