在按钮值中添加HTML图标

Question

<input type="submit" id="appCreate" name="Reds" value="Reds" formaction=@Url.Action("") formmethod="post" class="btn btn-success btn-block" onclick="javascript: return SubmitForm(this);" />

CSS -

.reddot {
  content: "\25cf";
  font-size: 1.5em;
  color: red;
}

I want to add <span class="reddot"></span> to the value of my button (it just creates a red dot icon). So the value of my button shown is Reds<red dot icon>

How can I do this?

Answer 1

Instead of content: "\\25cf"; Try background: url('xyz.png');

Answer 2

<input> elements are considered void elements, therefore they cannot contain children. You could use a <button> element, but personally I'd discourage this method because the HTML spec deems it invalid.

One possible solution is to wrap the button in a container. That container could have a pseudo-element ( ::after ) that places the red dot for you.

 .reddot { display: inline-block; position: relative; } .reddot > input[type=submit] { text-align: left; padding-right: 20px; /* Add padding to make space for the dot */ } .reddot::after { /* Place an element inside of .reddot */ display: block; position: absolute; top: 50%; transform: translateY(-50%); /* Center it vertically */ right: 5px; /* 5px off the right edge */ content: "\\25cf"; font-size: 1.5em; color: red; pointer-events: none; /* Make sure the dot doesn't block the button */ } 

 <div class="reddot"> <input type="submit" /> </div> <div class="reddot"> <input type="submit" value="Here's another button with a red dot!" /> </div>