Bootstrap3 でinputとアイコンを並列させる方法

Bootstrap3 でアイコン付きinput form を作る

お問い合わせ画面やユーザ登録画面などで
書き込む欄とアイコンが並んだ図のようなフォームを作りたいことありませんか？

僕はこれとdatepicker for bootstrapを併用してカレンダーを使ったデータ入力をしようとしています！

ここのデモで実装されているinput フォームとカレンダーアイコンをつくろうと真似してたんですが、
簡単には出来ませんでした。
理由は簡単で、Bootstrap3 に対応していなかったからだと思います。

そこでこのページを参考に、以下の様に変更しました！

<div class="form-group">
    <div class="input-group date StartMonth col-lg-4 col-lg-offset-4">
        <input name="StartMonth" size="16" class="form-control" type="text" readonly>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</div>

</span>

</div>

どうやらclass の名前の付け方が変わった模様。
これで、テキストの部分は読み込みのみで、その横にアイコンが出てきていると思います。
bootstrap3 からデフォルトアイコンが無くなったみたいですが、無料で使えるfonts があるので
そこから探してお気に入りのアイコンを選べば良いと思います。
自分のサイトの表示に合わせて、col-lg-4 col-lg-offset-4の部分を変えてください。

どうやってカレンダーを表示するかは、また今度！