How to place an icon on QLineEdit?

Question

In the upper right corner of the stackoverflow.com website, there is a Search field with a magnifying lens and a gray “search” keyword:

I wonder if it is possible to achieve the same look with QLineEdit . If so, how?

Answer 1

An easy way for dummies

• Add a QLineEdit and set it without a QLineEdit::setFrame
• Add a QLabel with the background color to white (according to the stylesheet) and the icon
• Combine line editing and label with layout, set spacing to 0
• Set placeholder text with QLineEdit::setPlaceholderText

Result

---

Advanced way

Check this topic: "Can QLineEdit do this?"

And the related python code: http://bazaar.launchpad.net/~henning-schroeder/%2Bjunk/qtwidgets/annotate/head:/qtwidgets/lineedit.py

or

"How to do - insert a button inside QLineEdit. [Pyqt4]"

Basically, QLineEdit configured by drawing a widget on it (label, button, or even combobox). Then reset the field, cursor, padding and drawing event. No magicians!

Answer 2

Here is an alternative simple way:

Set placeholderText to “🔍” and the Seqoe UI Symbol font family or another font that can be found on your target systems, which include the glyph sign U + 1F50D LEFT-POINTING MAGNIFYING GLASS.

Answer 3

Here you can only achieve this with style sheets:

 QLineEdit { background: #f3f3f3; background-image: url(:Images/search.svg); /* actual size, eg 16x16 */ background-repeat: no-repeat; background-position: left; color: #252424; font-family: SegoeUI; font-size: 12px; padding: 2 2 2 20; /* left padding (last number) must be more than the icon width */ } 

Here is the result:

This is still not perfect. You do not have much influence on the position of the icon.

Answer 4

To get this result:

You can subclass QLineEdit.
So your title should look something like this:

 #ifndef LINEEDITICON_H #define LINEEDITICON_H #include <QLineEdit> #include <QIcon> class LineEditIcon : public QLineEdit { Q_OBJECT public: LineEditIcon(const QIcon icon, QWidget *parent = Q_NULLPTR); ~LineEditIcon(); void setIcon(QIcon icon); protected: virtual void paintEvent(QPaintEvent *event); private: QIcon m_icon; }; #endif // LINEEDITICON_H 

And your source file looks like this:

 #include "lineediticon.h" #include <QPainter> LineEditIcon::LineEditIcon(const QIcon icon, QWidget *parent) : QLineEdit(parent) { setIcon(icon); } LineEditIcon::~LineEditIcon() { } void LineEditIcon::setIcon(QIcon icon) { m_icon = icon; if (m_icon.isNull()) setTextMargins(1, 1, 1, 1); else setTextMargins(20, 1, 1, 1); } void LineEditIcon::paintEvent(QPaintEvent * event) { QLineEdit::paintEvent(event); if (!m_icon.isNull()) { QPainter painter(this); QPixmap pxm = m_icon.pixmap(height() - 6, height() - 6); int x = 2, cx = pxm.width(); painter.drawPixmap(x, 3, pxm); painter.setPen(QColor("lightgrey")); painter.drawLine(cx + 2, 3, cx + 2, height() - 4); } } 

Answer 5

 QLineEdit* _lineEdit = new QLineEdit(); _lineEdit->setClearButtonEnabled(true); _lineEdit->addAction(":/resources/search.ico", QLineEdit::LeadingPosition); _lineEdit->setPlaceHolderText("Search..."); 

extracted from: http://saurabhg.com/programming/search-box-using-qlineedit/

Answer 6

QT5 addAction

`` ``

 const QIcon passwordIcon(":/new/icons/res/passwd.png"); ui->password->setClearButtonEnabled(true); ui->password->addAction(passwordIcon, QLineEdit::LeadingPosition); 

`` ``