如何在文本字段中添加图标

Question

我的工具栏中有一个搜索文本字段。我想在文本字段（最左边的搜索图标）中添加一个图像而不是一些文本。

请提供一些实现此目的的想法。

Answer 1

我建议您使用 font-awesome 加载您的图标。添加 Font Awesome 库后，您应该执行以下操作：

Fiddle: https://fiddle.sencha.com/#fiddle/mmp

Ext.create('Ext.Panel',{
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    title: 'Testing Panel',
    html : 'Contents of the Testing Panel',
    bodyPadding: 10,
    tools:[{
        xtype : 'textfield',
        fieldStyle : 'font-family: FontAwesome',
        emptyText: '\uF002 Find User'
    }]
});

Answer 2

在我的情况下，我需要图标始终存在，所以这是我想出的解决方案 (Fiddle):

JS

Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    title: 'Testing Panel',
    html: 'Contents of the Testing Panel',
    bodyPadding: 10,
    tools: [{
        xtype: 'textfield',
        cls: 'icon-textfield fa fa-search',
        emptyText: 'Find User'
    }]
});

CSS

.icon-textfield:before {
    position: absolute;
    height: 100%;
    z-index: 9999;
    left: 5px;
    font-size: 12px;
    top: 25%;
}

.icon-textfield .x-form-text {
    padding-left: 20px;
}

如何在文本字段中添加图标

How to add an icon inside a textfield

javascript

extjs