Isto é um comportamento normal, a largura ocupada por todos os `<a>` é maior que a da sua div `#icons`. Mesmo que você use a propriedade `white-space:nowrap` (em `#icons`) o conteúdo interno ultrapassará o limite:

![img][1]

Nesse caso você tem duas opções: Diminuir o tamanho ocupado pelos elementos filhos ou aumentar a largura do elemento pai.

### Alternativa ###
Quando não se tem uma quantidade fixa de elementos internos, a melhor solução pode ser utilizar a propriedade `flexbox`.

 - [Navegadores que suportam][2]
 - [Flexbox na MDN][3]
 - [Um guia bem completo no CSS-tricks][4]

<br>
###Exemplo:###

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

    * {-webkit-box-sizing:border-box;box-sizing: border-box;}

    /* Só isso...
       Não precisei definir nada nos elementos filhos */
    .documents {
        display: -webkit-flex;
         display: -ms-flexbox;  
            display: -moz-box;
                display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: center;
    }

    /* Só para melhorar a visualização, as regras abaixo não tem relevância */
    .documents {background: #27ae60;height:60px;width: 300px}
    .documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}

<!-- language: lang-html -->

    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

    <p>Com um único elemento</p>
    <div class='documents'>
        <span class='fa fa fa-file-word-o'></span>
    </div>

    <p>Com mais de um...</p>
    <div class='documents'>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
    </div>

    <p>Com mais ainda...</p>
    <div class='documents'>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
        <span class='fa fa fa-file-word-o'></span>
    </div>

<!-- end snippet -->


  [1]: https://i.sstatic.net/LdJCN.png
  [2]: http://caniuse.com/#feat=flexbox
  [3]: https://developer.mozilla.org/pt-BR/docs/CSS/Usando_caixas_flexiveis_css
  [4]: http://css-tricks.com/snippets/css/a-guide-to-flexbox/