html - 如何将fontello图标放入输入值？

Question

说我有这个代码：

<input type="submit" value="Send" />

但是在文本“发送”之后，我想要一个fontello图标。显然这不起作用：

<input type="submit" value="Send <i class='icon-right-circle'></i>" />

在我的 fontello demo.html文件中，该图标的代码是0xe81c. 没有办法将此图标放在输入值中吗？像作为一个 HTML 实体还是什么？

谢谢！

Answer 1

这应该有效：

<input type="submit" value="Send &#xf001;" style="font-family:icons" />

有两个步骤：

1. 用于输出字符。您可以在 fontello css 文件中找到代码，例如content:'\f001'，只需替换\f001->即可。

2. 为此元素设置字体系列。我icons在我的代码中使用，您应该检查 css 文件中的字体名称。

---

进一步的步骤：您可以自定义自己的类：
.myfont { font-family:icons; }

html 将是：
<input type="submit" value="Send &#xf001;" class="myfont" />

Answer 2

你可以在 CSS 中试试这个：

input[type='submit'] {
    background-image: url(images/icon.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

其他选项是使用button type="submit"而不是input

<button type="submit" class="btn btn-success">
    <i class='icon-right-circle'></i> Text
</button>