Integrate custom png image on input group addon

Question

I have this output using input-group-add-on:

Let say if I want to use my own icon

My expected output will be like this:

Icons: [3 []4 []5

Can anyone help me?

My codes:

                       <div class="input-group" style="margin-top:4px;">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-lock"></span>
                            </span>
                            <input type="text" class="form-control" placeholder="<?= lang('education.year') ?> *" />
                        </div>
                        <div style="margin-top:4px;">
                            <div style="float:left; width:49%;">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-user"></span>
                                    </span>
                                    <select name="gender" class="form-control">
                                        <option value=""><?= lang('gender') ?> *</option>
                                    </select>
                                </div>
                            </div>
                            <div style="float:right; width:49%;">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                                    <select class="form-control">
                                        <option value=""><?= lang('preferred.language') ?> *</option>
                                        <option value="<?= PREFERRED_LANGUAGE_MALAY ?>">Bahasa Malaysia</option>
                                        <option value="<?= PREFERRED_LANGUAGE_ENGLISH ?>">English</option>
                                    </select>
                                </div>
                            </div>
                        </div>

Answer 1

Well, you just have to replace the glyphicon span with an <img src="...">:

<div class="input-group">
    <span class="input-group-addon">
        <img src="path/to/img.png">
    </span>
    <input type="text" class="form-control" placeholder="<?= lang('education.year') ?> *" />
</div>