.nav-links a:nth-child(1):before {
 content: "\f177"; 
 font-family: FontAwesome;
 margin-right: 5px;
}

Шпаргалка Font Awesome для Фотошопа и CSS: fontawesome.io/cheatsheet.

Чтобы использовать в Фотошопе — копипаста САМОГО значка, для css — копипаста после #, например:

[]

для листа стилей вытаскиваем f177.

Само собой, вы должны скачать и установить шрифт — для фотошопа — на своём компьютере, для html и css — на сайте: fontawesome.io

Источник: http://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css

Чтобы вывести иконку font-awesome в input:

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

<p class="wrapper"><input placeholder="&#61447; Username"></p>