¿Cómo agregar un cuadro de búsqueda con un icono a la barra de navegación en Bootstrap 3?

Estoy usando el nuevo Twitter Bootstrap 3, y estoy tratando de colocar un cuadro de búsqueda como este (a continuación)en la barra de navegación superior:

En Bootstrap 2, podría haberse hecho de esta manera:

<form class="form-search" method="get" id="s" action="/">
    <div class="input-append">
        <input type="text" class="input-medium search-query" name="s" placeholder="Search" value="">
        <button type="submit" class="add-on"><i class="icon-search"></i></button>
    </div>
</form>

Pero no estoy seguro de cómo producir lo mismo en Bootstrap 3, ya que tanto ha cambiado.

El HTML predeterminado para el formulario del cuadro de búsqueda de la barra de navegación en Bootstrap 3 es:

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

¿Cómo lo modifico para lograr lo que necesito?

Respuestas a la pregunta(6)

Su respuesta a la pregunta