Question

我有输入字体图标的代码，它的工作非常正常，但只能用于，

或标签。当我尝试在表单按钮中使用字体 - 图标按钮（例如图像按钮，提交按钮，重置按钮......）时，它不会显示。

hege去了css代码：

@font-face {
    font-family: "Flaticon";
    src: url("flaticon.eot");
    src: url("flaticon.eot#iefix") format("embedded-opentype"),
    url("flaticon.woff") format("woff"),
    url("flaticon.ttf") format("truetype"),
    url("flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}.flaticon-delete13:before {
    content: "\e000";
}

这里的html代码段工作正常：

<body>
    <div class="glyph-icon flaticon-delete13"></div>        
</body>

这是进入标题的链接：

<link rel="stylesheet" type="text/css" href="flaticon.css">

我想将此font-face图标与文本一起放入表单按钮（例如，提交按钮）。例如：一个图标“十字”以及文本“添加”。

提前感谢。

Answer 1

如果您实现了字体图标，则无法使用输入标记。相反，请将此用于提交按钮：

<button class='button' type='submit'><span class="glyph-icon flaticon-delete13"></span>Submit</button>

Answer 2

我建议使用Font Awesome来实现这个结果。

查看我的jsfiddle：http://jsfiddle.net/irkanu/7VytQ/

我还使用Bootstrap来实现表单的最小样式。

该按钮的代码为：

<button type="submit" class="btn btn-default"><i class="fa fa-plus"></i> Add</button>

Answer 3

这就是你要找的东西。您可以使用icomoon创建自己的图标 http://jsfiddle.net/SKMN9/

   <button type="submit" class="buttons add">Add New Page</button>

如何将字体图标应用于提交按钮

3 个答案: