Como adicionar uma caixa de pesquisa com o ícone na barra de navegação no Bootstrap 3?

Eu estou usando o novo Twitter Bootstrap 3, e estou tentando colocar uma caixa de pesquisa como esta (abaixo)na parte superior da barra de navegação:

No Bootstrap 2, poderia ter sido feito assim:

<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>

Mas não tenho certeza de como produzir o mesmo no Bootstrap 3, já que muita coisa mudou.

O HTML padrão para o formulário da caixa de pesquisa da navbar no Bootstrap 3 é:

<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>

Como faço para modificá-lo para conseguir o que preciso?

questionAnswers(6)

yourAnswerToTheQuestion