Flask WTF forms adding a glyphicon in a form field
<p>I have a Flask Wtf form as follows:</p>

<pre><code>class URL_Status(Form):
    url = URLField("Enter URL",
                       validators=[url(), DataRequired()],
                       render_kw={"placeholder": "http://www.example.com"},)
    submit = SubmitField('Search', render_kw={"onclick": "loading()"})
</code></pre>

<p>now I would like to add a bootstrap glyphicon in the input filed i.e. 'url'. As far as I know from this <a href="http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box">link</a>. We need to write the code as follows:</p>

<pre><code>&lt;div class="form-group has-feedback"&gt;
    &lt;label class="control-label"&gt;Username&lt;/label&gt;
    &lt;input type="text" class="form-control" placeholder="Username" /&gt;
    &lt;i class="glyphicon glyphicon-user form-control-feedback"&gt;&lt;/i&gt;
&lt;/div&gt;
</code></pre>

<p>When I call the form in HTMl my html creates all the code except this line:</p>

<pre><code>&lt;i class="glyphicon glyphicon-user form-control-feedback"&gt;&lt;/i&gt;
</code></pre>

<p>Any suggestions how can I add this line from my class 'URL_Status' so that I am able to see a glyphicon with my input field. Thanks</p>

<p>Here is a little trick to solve this problem.</p>

<p>CSS:</p>

<pre><code>.user {
padding-left:30px;
background-repeat: no-repeat;
background-position-x: 4px;
background-position-y: 4px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIzOUVGMUYxMDY3MTExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIzOUVGMUYwMDY3MTExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgwMTE3NDA3MjA2ODExODA4M0ZFMkJBM0M1RUU2NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNjgwMTE3NDA3MjA2ODExODA4M0U3NkRBMDNEMDVDMSIvPiA8ZGM6dGl0bGU+IDxyZGY6QWx0PiA8cmRmOmxpIHhtbDpsYW5nPSJ4LWRlZmF1bHQiPmdseXBoaWNvbnM8L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkX/peQAAACrSURBVHja7JSLCYAwDEQbJ3AER+kouoFu0FEcqSM4gk4QE4ggVRPxg1A8OFCSvkqC5xDRaSZ5ciTjyvzuzbMnwKjY34FHAx618yCQXQHAcVFE5+GoVijgyt3UN1/+hPKFd0a9ubxQa6naMjOdOY2jJAdjZIH7tJ8gzRNuZuho5MriUfpLNbhINXk4Cd27pN3AJVqvQlMPSxSz+oegqXuQhz9bNvDpJfY0CzAA6Ncngv5RALIAAAAASUVORK5CYII=);}
</code></pre>

<p>Template:</p>

<pre><code>&lt;div class="col-md-4"&gt;
    &lt;form class="form form-horizontal" method="POST"&gt;
        {{ form.hidden_tag() }}
        {{ wtf.form_field(form.username, class="form-control user") }}
        {{ wtf.form_field(form.password) }}
        {{ wtf.form_field(form.submit) }}
    &lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p>This solution based on <a href="http://stackoverflow.com/a/29705837/5511849">this answer</a>. It just embedding the image representation of the glyphicon directly in the CSS using base64 URI encoding.</p>

<p>You can get base64 data of glyphicon on this <a href="http://andrew.hedges.name/experiments/glyphicons/" rel="nofollow">site</a>. Besides, You can also use image(25*25) to replace the base64 data. Like this:</p>

<pre><code>background-image: url({{ url_for('static', filename='user.png') }});
</code></pre>

python html twitter-bootstrap flask wtforms